iPhone iOS will not display box-shadow properly

佐手、 提交于 2019-11-27 10:26:57

问题


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!


回答1:


Try adding -webkit-appearance: none; iOS tends to mess up forms.



来源:https://stackoverflow.com/questions/10757146/iphone-ios-will-not-display-box-shadow-properly

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!