删除iOS输入阴影

小编典典

删除iOS输入阴影

css

在iOS（Safari 5）上，我必须遵循以下输入元素（顶部内部阴影）：

我想删除顶部阴影，-webkit-appearance但无法保存错误。

当前样式是：

input {    
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
    -webkit-appearance: none;
    -moz-appearance: none;
}

阅读 275

2020-05-16

共1个答案

小编典典

您需要使用-webkit-appearance: none;来覆盖默认的IOS样式。但是，仅选择inputCSS中的标记不会覆盖默认的IOS样式，因为IOS使用属性选择器添加了它的样式input[type=text]。因此，您的CSS将需要使用属性选择器来覆盖已预设的默认IOS
CSS样式。

尝试这个：

input[type=text] {   
    /* Remove First */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Then Style */
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
}

2020-05-16