I'm having trouble adding padding to a submit button. I've created an ultra simple example in a JSFiddle:
http://jsfiddle.net/yxr197pa/1/
Here's the code for it:
HTML:
<input type="submit" value="Submit" />
CSS:
input {
padding: 20px;
}
I must just not be getting something really simple, and I'm kind of embarrassed I can't figure it out. It seems like no one else is having this problem, as I've searched quite extensively. I've even seen examples of people adding padding with no issues. Would really appreciate any help. Thank you!
Update
To clarify the problem for those who might be confused by what I'm asking: the code above doesn't alter the padding of the button in any way. It appears there's default padding applied to the button, but the padding I've specified simply doesn't show. Here's a picture depicting what I see when I enter the code above:
http://i.imgur.com/9RxGJUo.png
This issue has been fixed in an answer below, but the underlying cause is still a mystery to me. It appears to have something to do with my computer. I'm using a fully up to date Mac OS X. My PC, on the other hand, renders the example above completely normally. It doesn't matter what browser I use on my Mac either, it still doesn't render the padding that I'm specifying.
That's not the end of the story though, because after analyzing the source code on other websites, I found submit buttons that were rendering padding correctly on my Mac, with effectively identical code. See here:
http://htmlandcssbook.com/code-samples/chapter-14/styling-submit-buttons.html
So why is the padding being rendered sometimes and not others?
Based on the comments above, you said you're on a Mac (OS X)..
Therefore you need to set the the appearance property of the input element to none in order for the padding to work. I went ahead and added -webkit/-moz vendor prefixed properties too:
input {
padding: 20px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
<input type="submit" value="Submit" />
This just seems to be one of those strange cross-browser inconsistencies, because this doesn't appear to be an issue on Windows.
It looks to me like you cannot add padding to an input.
I think the closest you can get is increasing the height and the width of the input.
Related
Sometimes you think you're going insane. This one of those times.
While working I had an issue that I couldn't change the font-size of a submit button. Then after going insane I boiled it down to this simple example:
https://jsfiddle.net/zf9sq2gx/
font-size: 100px;
I am sure this looks perfectly fine on your machine, but it does not on mine.
See:
I am working on a Mac here and this result is from Chrome.
- Firefox works as expected
- Other pages I made or visit online do work, however this basic example and the page I am working on right now, they exhibit this behavior.
It does not matter which number or unit of font size. Other values like padding are also ignored. WIDTH however is NOT ignored.
When changing the font-size in the chrome dev tools, the button flickers from its current font-size to a smaller one, but instantly jumps back. Even tho it should at least flicker to a big one in this case.
What if we change it to a different tag altogether? Now it works.
What if we just change the type from submit to text? It behaves as expected again.
What if we remove even the other tags like body and form and everything? Doesn't matter.
Updating meme. No change.
How could this possibly be a thing?
Not to mention that other pages may work with submit buttons. But I made this example in jsfiddle as simple as possible to go back to bare minimum, even using inline CSS (because !important did nothing).
Try to use
-webkit-appearance: none;
It will cancel default chrome styles for a button.
In addition to Petruk Dmitry's solution, you can solve this by setting -webkit-appearance: none, or by overwriting one of the vendor styles, if you don't want to add browser specific CSS. Appearantly, overwriting any of the vendor styles (see below for a list of tested styles) will remove the button styling completely. I've never had this problem before since I normally change the background and border when styling a button.
Examples:
<input type="submit" style="font-size: 60px;"><br />
<input type="submit" style="font-size: 60px; -webkit-appearance: none;" value="Webkit appearance"><br />
<input type="submit" style="font-size: 60px; background: blue;" value="background"><br />
<input type="submit" style="font-size: 60px; border: 1px solid green;" value="border">
EDIT: (some) More information on this behaviour can be found here, though it seems as if this "feature" isn't very well documented. For more reading on the subject however, you can check this page.
A related question was asked seven years ago, with the last (unfortunately not helpful for me) response in 2015: Does `min-width` not work on form `input[type="button"]` elements?
I'm hoping that by now there's a better answer.
I've got this very simple CSS:
button {
min-width: 80px;
}
Which is being completed ignored, at least by Chrome on macOS (it works in Firefox, and Chrome on Windows). If I inspect one of these buttons, the min-width property is indeed set, but it just isn't doing anything.
Some of the tricks mentioned in the old thread above sort of work, but they have unwanted side effects. For instance, explicitly setting width as well as min-width has an effect, but then buttons with long text get word-wrapped instead of growing wider.
Changing the border color works (weird that that does anything), but it screws up the rounding of the border, and probably wouldn't be consistent across browsers anyway.
So, now that a few years have passed, does anyone know any better tricks to get min-width to work for a button in Chrome on macOS?
are you using <input type="button" value="save" /> OR <button>Save</button>?
Both css working for me. Try this. It will help you.
input[type='button'] { min-width: 180px;}
button { min-width: 180px; }
I can't get a input button to change its font size unless I change the background color.
this html:
<input type="button" id="startStop" value="start" />
and this css:
input#startStop{
font-size: 3em;
}
result in this:
which is exactly the same as with no styling at all.
Nothing I do to the css changes it: making it 60em; changing how I select it; they all result in the same, default-looking button.
I inspected it in Chrome, and the style is actually hitting the element, and not getting overridden:
But somehow the computed style isn't working:
(that's with a base font-size of 1em for the whole document. and, no, changing the base font-size has no effect)
The only thing that changes the font size it is if I give it a background-color:
input#startStop{
font-size: 3em;
background-color: white;
}
results in this:
Can anybody tell me what is going on?
EDIT: #Hashem Qolami, thanks for posting it in an external editor, which I should have done. When I look at your JS bin, it looks like this:
EDIT 2: it's browser specific.
The error is only occurring on Chrome, Safari and Opera, and only on Mac.
If renders correctly on Firefox for Mac and on all browsers (IE10, Chrome, Firefox, Safari, and Opera) on windows.
Indeed this only happens on WebKit-MacOS based browsers. Seems to be a WebKit restriction so that the Aqua appearance stays always so.
As long as the Aqua appearance is enabled for push buttons, certain CSS properties will be ignored. Because Aqua buttons do not scale, the height property will not be honored. Similarly font and color customizations will also not be honored. The overriding principle for push buttons is that you will never see a button that is some “half-Aqua” mix. Either the button will look perfectly native, or it will not be Aqua at all.
Source: https://www.webkit.org/blog/28/buttons
Which explains why setting a background makes font-size works; it breaks the Aqua appearance.
#pzin's response got me started on the right track. He's right in that anything that breaks aqua will get it done. The recommended way to handle it without having to specify a background color is this bad boy:
-webkit-appearance: button;
Setting a border property should also work. But I think -webkit-appearance: none; would be the best approach, as it "turns off" the Aqua appearance on MacOS browsers, so any other form control that Aqua inhibits CSS for would subsequently be style-able with your choice of CSS. Was meant to add this as a comment, but don't have enough reputation ;_;.
I see that you successfully had solved the problem, but I wonder, if the only problem is to make the button bigger, why sticking to font-size method while you can also change the button size by width + height or padding.
First of all, I've been searching for an answer in Google and forums, but didn't find, sorry if it has been asked before and if you can link me to an answer it would be great.
Here's my problem: I have a web calculator made of a table with buttons inside. Here's a link. If you open it with IE it will be all messed up, so don't. I'll work on it later. On FF the rowspaned buttons do not stretch up and down to cover the hole cell, on Chrome it looks as intended. How do I make it look good on FF too? thx in advance to responders.
Using a <table> for layout is a bad idea for numerous reasons that don't need to be re-hashed here. What matters for you is that FireFox displays tables differently than other browsers and you are going to have a hard time laying out your buttons as you want them with that approach.
Instead, just ditch the table and absolutely position the buttons, or float them.
Edit: A floated layout works nicely:
http://jsfiddle.net/gilly3/7rL97/5/
JSFiddle's frame messes up the display if you view it in chrome, but if you view it in chrome outside of the frame, you can see it works fine in chrome as well: http://fiddle.jshell.net/gilly3/7rL97/5/show/
#yekhezkel gilly3 is probably right. but i found solution to your problem. It works in firefox and chrome. I have not tested in IE.
step1: add a class of fix to all the td's containing rowspan=2. It should look something like this.
<td rowspan="2" class="fix">
<button onclick="modifyInout('+')">+</button>
</td>
Step2: add the following css for fix class
.fix {
height: 70px; /* double the value of td height you specified earlier */
}
Let me know if it helps.
Here is the jsFiddle: (open in firefox or other browser to test it.)
Regards :)
Read this and try to add padding
padding: 18px 6px;
Padding will stretch your button
I have a site that has a simple HTML button in a form. All browsers show this button correctly. However, in Firefox 2 and Seamonkey it appears just as a solid grey square that cannot be clicked on and that has no text.
<input id="getaudiobutton" type="button" value="Get Audio" onclick="convert()" />
For those of you that have Firefox version 2 or Seamonkey, please see my site
Thanks all
SOLVED
No idea why but what I did was increase the size of the div holding the button so that the button can be shown fully. There wasn't enough space for the button to be clicked. Firefox 2 and Seamonkey managed to find this a bit troublesome.
Thank you all for your help. :)
From what I can see just by viewing it in Seamonkey and looking at the contents of the page and your CSS, you may want to check the style for the div that the button is contained in. I can see the button in Seamoney, but it is cut off at the very top, only allowing about 1-3 pixels to show. I can click it as well.
My guess would be that since you are setting a static height of 34px for the style that is applied to the parent div of the button, it is cutting off most of the button.
I observe the same behavior as s13james (+1 for that) but have some more things I want to point out.
You may want to rethink your use of line-height and height there, as the wrapping of that input element to the next line with the combination of those values has a lot to do with your trouble.
I see you're applying the same style via id and class, however that style is declared only for use as a class:
div.w_span_auto{
background:url(../images/wr.png) top right no-repeat;
padding-right:18px;
height:34px;
line-height:34px;
text-align:left;
border:none;
}
(For an id, you'd need to have declared it as div#w_span_auto.)
I'm not sure why you're declaring it twice either. There's an identical declaration later in the same css file.
Cheers.
Are you sure JS is enabled on your copy of Firefox?
Do you really have to worry about FireFox 2? It also only has a 3% market share:
http://marketshare.hitslink.com/report.aspx?qprid=0
DO you need a type="submit", instead of type="Button"?