iPhone iOS will not display box-shadow properly
Solution 1
Try adding -webkit-appearance: none;
iOS tends to mess up forms.
Solution 2
I had a problem trying to add a box-shadow around invalid inputs (before submit is clicked).
Using -webkit-appearance: none;
worked fine for a while, but I've noticed on chrome checkboxes have gone missing now.
Here's my hack that works more or less cross browser. Looks like safari is the new "internet explorer" :-/
input:invalid, select:invalid, textarea:invalid, .invalid {
background-clip: padding-box; /* Safari fix */
box-shadow: 0 0 5pt 2pt rgba(255,0,0,.75) !important;
}
select:invalid {
border: 1px solid red; /* Safari fix */
}
input[type="checkbox"]:invalid{
background: red; /* Safari fix */
}
input[type="radio"]:invalid{
background: red; /* Safari fix */
}
rebz
Web Designer, thrill-seeker, and adventurer... also a slight obsession with pixel placement.
Updated on July 05, 2022Comments
-
rebz almost 2 years
The Design
The contact form on a responsive design has input fields with both an inset shadow and regular outside shadow. See image below.
The Code
input { background:#fff; height:auto; padding:8px 8px 7px; width:100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border:#fff solid 3px; border-radius:4px; box-shadow:0px 0px 5px rgba(0, 0, 0, .25), inset 2px 2px 3px rgba(0, 0, 0, .2); }
The Issue
iOS v4+ does not display the box-shadow properly. See image below.
Tested
I have attempted using -webkit-box-shadow.
-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .25), inset 2px 2px 3px rgba(0, 0, 0, .2);
I have applied
display:block;
to the input element.
Current Workaround
I would prefer not having to do this, but this is the only way I can get my desired effect.
HTML
<p><input /></p>
CSS
p { width:50%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-shadow:0px 0px 5px rgba(0, 0, 0, .35); border-radius:4px; } input { background:#fff; height:auto; padding:8px 8px 7px; width:100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border:#fff solid 3px; border-radius:4px; box-shadow:inset 2px 2px 3px rgba(0, 0, 0, .2); }
Even with this workaround, the inset shadow on iOS is not rendered properly; but it's close enough.
My Question
Is it possible to have multiple instances of box-shadow on a single element render properly on iOS devices? If not, what about the inset shadow? Or am I using this property and its values incorrectly?
Thanks in advance!
-
Tom Pietrosanti almost 12 yearsNot an exact duplicate, but the answer was also given on this question: stackoverflow.com/questions/3902629/…, just not accepted. I'm glad this answer was accepted here.
-
Johansrk almost 10 yearsand remember to put it before box-shadow, not after
-
Cagatay Ulubay over 8 yearsIt's been approx. 3 years, but
iOS tends to mess up forms
.. I have to vote this up :'-) Note: iOS box-shadow will need 3 things. 1) Vendor Prefix on the box-shadow-webkit-box-shadow: ...
2) Border Radius set, example to 1pxborder-radius: 1px
3) disabled appearance-webkit-appearance: none;
-
Tanner Dolby over 3 yearsAdding
-webkit-box-shadow: ..
and-moz-box-shadow: ..
will provide the deepest possible browser support.