How to Style Button Inputs to Be Identical in Chrome and Firefox

How to style button inputs to be identical in Chrome and Firefox?

I have concluded that the only way of ensuring that button/submit inputs remain identical across browsers is to recreate them using divs. Creating button inputs is easy since you can attach click events onto divs the same way as on buttons. Creating submit inputs is barely any harder. I solved it using jQuery by declaring a class, for instance 'submit', and adding the submit button functionality to all elements that have that class on load. Here's an exampe:

// On page load:
$('.submit').on('click', function(e) {
    $(this).closest('form').submit();
});

Divs with the submit class that are not in a form will do nothing when clicked.

If you add tabindex="n" (where n is a number) to the element, it can also be focused using tab, just like a normal button. You can also style it to show that it's focused by using the :focus css pseudo-class. Then you could use space or enter to click the button with this event handler:

$('.submit').on('keypress', function(e) {
    if (e.keyCode == 13 || e.keyCode == 32)
        $(this).closest('form').submit();
});

_{(I wrote that last snippet in a hurry and haven't actually tested it. If you find an error in it or test it successfully please edit this answer accordingly.)}

Input Field appearing different in Chrome and Firefox

There is a difference because Firefox uses box-sizing: content-box on type="search" inputs, while Chrome uses border-box.

.form-wrapper input {
    box-sizing: border-box;
}

http://jsfiddle.net/J8dSN/12/

input range styling IE11/Firefox same as Chrome

The input type range is quite customizable. Unfortunately, each browser has its own way and thus we have to write longer codes than expected. Than also you will not get the exact similar results. The result will look little bit different from other browsers.

You can refer an example below which I try to customize to make it looks like your range slider. I tested it with various browsers and it looks almost similar in most of the browsers.

<!DOCTYPE html>

<html>

<head>

<style>

input[type=range] {

  -webkit-appearance: none;

  margin: 10px 0;

  width: 100%;

}

input[type=range]:focus {

  outline: none;

}

input[type=range]::-webkit-slider-runnable-track {

  width: 100%;

  height: 35px;

  cursor: pointer;

  animate: 0.2s;

  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;

  background: lightgray;

  border-radius: 25px;

  border: 0px solid #000101;

}

input[type=range]::-webkit-slider-thumb {

  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;

  border: 0px solid #000000;

  height: 35px;

  width: 39px;

  border-radius: 35px;

  background: silver;

  cursor: pointer;

  -webkit-appearance: none;

  margin-top: -1px;

}

input[type=range]:focus::-webkit-slider-runnable-track {

  background: lightgray;

}

input[type=range]::-moz-range-track {

  width: 100%;

  height: 35px;

  cursor: pointer;

  animate: 0.2s;

  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;

  background: lightgray;

  border-radius: 25px;

  border: 0px solid #000101;

}

input[type=range]::-moz-range-thumb {

  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;

  border: 0px solid #000000;

  height: 35px;

  width: 39px;

  border-radius: 35px;

  background: silver;

  cursor: pointer;

}

input[type=range]::-ms-track {

  width: 100%;

  height: 35px;

  cursor: pointer;

  animate: 0.2s;

  background: transparent;

  border-color: transparent;

  border-width: 39px 0;

  color: transparent;

}

input[type=range]::-ms-fill-lower {

  background: lightgray;

  border: 0px solid #000101;

  border-radius: 35px;

  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;

}

input[type=range]::-ms-fill-upper {

  background: lightgray;

  border: 0px solid #000101;

   border-radius: 35px;

  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;

}

input[type=range]::-ms-thumb {

  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;

  border: 0px solid #000000;

  height: 35px;

  width: 39px;

  border-radius: 35px;

  background: silver;

  cursor: pointer;

}

input[type=range]:focus::-ms-fill-lower {

  background: lightgray;

}

input[type=range]:focus::-ms-fill-upper {

  background:lightgray;

}

body {

  padding: 30px;

}

</style>

</head>

<body>

<input type="range">

</body>

</html>

How can I make my HTML form button look identical in mobile and desktop browsers?

It appears that I am not the only one who has had this problem CSS submit button weird rendering on iPad/iPhone.

As Francesco points out, this is a rendering error done by iOS devices, and to disable the button modifications I just need to add

-webkit-appearance: none;

to any classes or ids I do not want to be rendered irregularly.

Input submit and a tag styling to look identical - Firefox issue

I believe this might be your solution: https://stackoverflow.com/a/1986666/107244

input::-moz-focus-inner /*Remove button padding in FF*/
{ 
    border: 0;
    padding: 0;
}

How to design a radio button, which looks the sam in Firefox, Chrome and IE11

Add this for IE11, used ::-ms-check

/* fallback for  IE11 */
.radiobtn[type="radio"]:checked::-ms-check {
    border: 2px solid green;
    color: green;
    opacity: 1;
}

.radiobuttons{

    background-color: white;

    font: 16px Arial, sans-serif;

}

.radiolabel{

    font: 16px Arial, sans-serif;

    color: #000000;

    opacity: 0.9;

}

.radiobtn[type="radio"] {

    /* remove standard background appearance */

    -webkit-appearance: none;

    -moz-appearance: none;

    /* create custom radiobutton appearance */

    display: inline-block;

    width: 25px;

    height: 25px;

    padding: 4px;

    /* background-color only for content */

    background-clip: content-box;

    border: 2px solid #000000;

    opacity: 0.4;

    border-radius: 50%;

    vertical-align: bottom;

}

/* appearance for checked radiobutton */

.radiobtn[type="radio"]:checked {

    background-color: green;

    border: 2px solid green;

    opacity: 1;

}

.radiobtn[type="radio"]:checked::-ms-check {

    border: 2px solid green;

    color: green;

    opacity: 1;

}

.radiogroup {

    vertical-align: middle;

    margin-bottom: 20px;

}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <title>Title</title>

    <link rel = "stylesheet" href = "test.css">

</head>

<body>

<div class="radiobuttons">

    <div class="radiogroup">

        <input class="radiobtn" type="radio" id="mc" name="Zahlmethode" value="Mastercard" >

        <label class="radiolabel" for="mc"> Mastercard</label><br>

    </div>

    <div class="radiogroup">

        <input class="radiobtn" type="radio" id="vi" name="Zahlmethode" value="Visa">

        <label class="radiolabel" for="vi"> Visa</label><br>

    </div>

    <div class="radiogroup">

        <input class="radiobtn" type="radio" id="ae" name="Zahlmethode" value="AmericanExpress">

        <label class="radiolabel" for="ae"> American Express</label>

    </div>

</div>

</body>

How to Style Button Inputs to Be Identical in Chrome and Firefox