代码之家 › 专栏 › 技术社区 › Jason

iPad/Safari上的盒子阴影

css3 focus input safari ipad

14

Jason · 技术社区 · 14 年前

我在iPad上为Safari的输入框添加漂亮的焦点阴影时遇到问题。

这是我的密码

记住定义焦点样式!*/ 焦点:{ 概要:0; } 输入[类型=文本]{ 宽度:94Px; 高度:44 px; 线高:44px; 字体大小:24px; 边框:2倍纯色666666; } 输入:焦点{ -WebKit方框阴影:0 0 15px ffffff; -Moz Box阴影:0 0 15px ffffff; 盒影:0 0 15px ffffff; } < /代码>

我用的是埃里克·迈耶的重置。我希望它看起来像这样:

有什么想法吗?

谢谢大家。

<杰森>我iPad上的Safari输入框。

这是我的密码

/* remember to define focus styles! */
:focus {
    outline: 0;
}    
input[type=text]{
        width: 494px;

        height: 44px;
        line-height: 44px;
        font-size: 24px;
        border: 2px solid #666666;
    }
    input:focus{
      -webkit-box-shadow:0 0 15px #ffffff;
       -moz-box-shadow: 0 0 15px #ffffff;
       box-shadow:0 0 15px #ffffff;
    }

我用的是埃里克·迈耶的重置。我希望它看起来像这样: alt text

有什么想法吗?

谢谢大家。

杰森

3 回复 | 直到 9 年前

1

43

Thai 14 年前

我也有同样的问题,但我找到了解决办法:

-webkit-appearance: none;

但是,当有一个嵌入的阴影时,它不起作用。

2

5

Jason 13 年前

<input type="text" name="success" value="fail">

没有骰子的人,ipad还没有支持这个,这太没用了,是Chrome!

更新:

-webkit-appearance: none; FTW

3

2

Balram Singh 9 年前

在我的例子中,设置边界半径解决了我的问题。

border-radius: 1px;