How to Make Input Buttons Look Exactly The Same in All Browsers

How can I make input buttons look exactly the same in all browsers?

What is the easiest way to make buttons look exactly the same in all browsers?

Use an image.

I don't think you will get it exactly the same cross browser otherwise. You could get close with CSS, but you will be spending a bit of time and frustration (a CSS reset could make this a bit easier).

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.

Can't make my button look the same in different browsers

As internet explorer < 9 doesn't know about round corners you will not be able to do that in IE, as for gradient is more likely you will get different results in every browser.

The best practice is to make an image and add your custom design to it and then insert submit as an image

<input type="image" name="submit" src="http://www.example.org/images/my_submit_button.png" value="click here!" />

How to make button looks same across all devices in css?

You can set appearance: none to tell iOS Safari (and others) not to apply OS native styling to the element:

.button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

From there you can reset browser stylesheet attributes (e.g. margin, padding, font, etc) and apply your own custom styles.

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.)}

Make form button/text field same height in all browsers?

change:

*{
    line-height: normal !important;
}

or add something like:

input[type="submit"], input[type="text"] {
    line-height:normal !important;
}

don't ask why)

and. safari need special fixes. but looks well

Can't make my button look the same in different browsers

As internet explorer < 9 doesn't know about round corners you will not be able to do that in IE, as for gradient is more likely you will get different results in every browser.

The best practice is to make an image and add your custom design to it and then insert submit as an image

<input type="image" name="submit" src="http://www.example.org/images/my_submit_button.png" value="click here!" />

Make form button/text field same height in all browsers?

change:

*{
    line-height: normal !important;
}

or add something like:

input[type="submit"], input[type="text"] {
    line-height:normal !important;
}

don't ask why)

and. safari need special fixes. but looks well

How to keep buttons, text and images relative to a screens/browsers size?

you can use the percent notation

for example :

img {
  padding-top:50px;
  display: block;
  margin-left: 10%;
}

---

Related Topics