I have a simple input with some styles.
input {
display: block;
width: 100%;
padding: 4px 6px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
<input type="email" id="email" name="email" placeholder="Email">
The code works just fine with Firefox. However, in Chrome, when the input is focused it get shrunk a little bit (smaller than in normal state).
I've tried to apply border-box sizing on this input but the problem still retains. How should I fixed that?
Use the :focus pseudo class.
input:focus {
outline: none;
}
Like this: JSFiddle.
It works fine for me in Chrome and Firefox as well. Also worth to consider of using normalize.css (or something similar), to avoid (or fix) the browsers default css attriibute settings.
Related
I am trying to change the width of my input button. I can change it using chrome devtools when it's set to mobile, but once the React app is deployed and I check it on my phone, the width is unchanging. See screenshot below.
Thus far, I've changed my width size to all kinds of pixels and percentages and added these properties:
.TodoApp .button{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
My Login-Form doesn't work on FIREFOX.
You just can't write inside the fields (or at least it appears like that).
In Chrome everything works fine and also in IE, as far as IE allows it.
Here is my fiddle:
http://jsfiddle.net/W39EA/6/
I already debugged it and found that the lines, which are causing the error in Firefox are these:
.access .form-control {
padding: 21px 15px;
margin: 10px 0px;
}
They are at the very bottom of the Fiddle.
If I remove them, Firefox works again. But I actually need them to add the necessary padding to my Input-Fields.
Has anyone a suggestion for solving this problem?
It's because you have so much padding on the input fields. You could just set the height of the input field, and then only add a bit of top and bottom padding. -
If you change the input CSS to:
.access .form-control {
padding: 5px 15px;
margin: 10px 0px;
height:40px;
}
That should fix the problem - jsfiddle.net/W39EA/7
I think this problem came beacuse Firefox uses box-sizing property for input is different from the Chrome and IE.
So that I have added "box-sizing:content-box" in your css. After that I got the same kind of results in both the browsers. You can reduce the padding size based on your requirement now.
.access .form-control {
padding: 10px 7px;
margin: 10px 0px;
-moz-box-sizing:content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
i have a problem that i couldnt find a solution for it. I use bootstrap on my website and it uses
*, *:before, *:after {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
for all buttons.
Now i just installed arrowchat scrip and i have a problem with this rule from above, it ruins my css from arrowchat. I tryed to add
-webkit-box-sizing:content-box !important;
to my arrowchat class but still it doesnt affect with anything. Can someone give me a solution for this?
-webkit-box-sizing: content-box; /* Android ≤ 2.3, iOS ≤ 4 */
-moz-box-sizing: content-box; /* Firefox 1+ */
box-sizing: content-box; /* Chrome, IE 8+, Opera, Safari 5.1 */
You need all of them to cover all the browsers
I am trying to add padding to a box via:
.p-box-header{
border: 1px solid orange;
float: left;
width: $p-box-width;
padding: 0px 0px 0xp 20px;
}
and it looks like this:
The 'Food' header is adding 20px to it's width. This didn't happen in box below. Why is this happening and how can I prevent?
thx
Note : You wrote "0xp" and not "0px". If this doesn't solved your problem, then read the following.
You should take a look at a CSS3 property called box-sizing.
This forces the browser to render the box with the specified width and height, and place the border and padding inside the box.
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
More infos here : http://css-tricks.com/box-sizing/ and it's available since IE8 (CanIUse - Box-sizing)
I want to use HTML input type="number" on a mobile application, in order to indicate to the smarter mobile phones (Android, iPhone and some others), that the numeric keyboard is more interesting for the user than the normal one. This works nicely.
So, I have this piece of HTML here:
<h3>type="number"</h3>
<input type="number" class="input-number"/>
<h3>type="text"</h3>
<input type="text" class="input-text"/>
The important CSS elements applied here are:
input {
height: 2em;
padding: 0.2em 0.5em;
width: 100%;
/* avoid iPhone rounded corners */
border: 1px solid #afb7c1;
border-collapse: collapse;
border-radius: 0 0 0 0;
}
.input-number {
text-align: right;
}
Which should render like this:
The above is a screenshot taken from iOS 4.1, where the world was still OK. Also on Android phones, everything works fine. But check out what happens on iOS 4.2, 4.3:
All of a sudden, the number field is a bit less wide, almost as though the iPhone wants to make room for that useless spinner that appears on some browsers when the input has type="number".
Is anyone aware of such an issue? How did you fix it? Or work around it? Is there any other way to make mobiles prefer the numeric keyboard? Or is there some proprietary css style that I can apply to undo this additional right margin?
Actually the questioner himself is very close to the answer as he knows it is the spinner 's fault, and luckily webkit allow users to control it by CSS:
input[type="number"]::-webkit-outer-spin-button { display: none; }
Source: REMOVE SPIN CONTROL ON INPUT TYPE=NUMBER IN WEBKIT
Live demo: http://jsbin.com/aviram/5/
Hope it help.
While vincicat's solution (previously accepted with the bounty) seemed to work at first, it revealed yet another rendering flaw in the Webkit browser. In 2 out of 10 page refreshes, the input was rendered with zero width, when put in a <td> and styled with width: 100%...
A better solution (for my use-case) was found here:
Disable webkit's spin buttons on input type="number"?
It consists of these CSS styles:
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
Interesting addition: I've found the <input type="number"/> field very badly flawed in Blackberry's WebKit browsers. It seems to be the source of browser crashes. Having said this, we're not using that HTML 5 feature any longer...
Not sure if this helps, but try to add these lines to the input css
-webkit-box-sizing: border-box;
box-sizing: border-box;
I don't have access to the older iOS devices to test it but this works on modern iOS and at the same time Google Chrome has started to disobey width: as well, so this fixes both:
input[type=number] {
max-inline-size: none; /* chrome 71 */
max-width: unset; min-width: unset; /* iOS12 */
}