Css: How to Increase the Size of a Osx Submit Button

How to edit the size of the submit button on a form?

Using CSS you can set a style for that specific button using the id (#) selector:

#search {
    width: 20em;  height: 2em;
}

or if you want all submit buttons to be a particular size:

input[type=submit] {
    width: 20em;  height: 2em;
}

or if you want certain classes of button to be a particular style you can use CSS classes:

<input type="submit" id="search" value="Search" class="search" />

and

input.search {
    width: 20em;  height: 2em;
}

I use ems as the measurement unit because they tend to scale better.

Bug? Chrome on Mac ignores submit button font-size

Try to use

-webkit-appearance: none;

It will cancel default chrome styles for a button.

Submit Button CSS Styles different between Mac and Windows

Currently you are not specifying any styles that could make your buttons same across browsers. Each browser under an OS uses default style for the buttons (influenced by themes as well if any). You need to specify more things such as background , color, border, etc.

For example, this should look same across browsers:

form .sendbtn {
  display: block; 
  font-size: 26px; 
  padding: 3px 6px; 
  background:#eee;
  color:blue;
  border:none; /* or whatever */
}

input height on Mac

Add :

input[type=button] {
    -webkit-appearance: button;
}

in your CSS :-)

Here is the list of all values this property can take. By default, WebKit uses a custom style (with fixed height) for the buttons.

---

Related Topics