如何设置Safari和Chrome中的文本字段样式

Question

我还没有在IE上测试它.

我想为我的网站上的搜索栏[死网站]设置背景图像和文本框形状以及边框的样式.

如果您在Firefox或Opera上访问它并看到左栏中的搜索栏,那就是我想要的.现在,如果您在Safari或Chrome上访问它,您应该会看到它被默认输入文本字段替换,这会使文本难以辨认.

即使在这些浏览器上,我如何设置文本框的样式？

Answer 1

要明确的是,在您的网站上,您实际上是在设计搜索字段而不是文本字段.

<input type="search"> <!-- This is what you have -->

VS

<input type="text">

要删除默认样式并允许css属性工作,您需要更改-webkit-appearance属性.这应该做的伎俩:

#s {
    min-width:98%;
    background-color:#2a2a2a;
    color:#d3d3d3;
    border:2px solid #000000;
    font-size:.85 em;
    height:1.9em;
    display:inline !important;
    border-radius:5px 5px 5px 5px;
    outline:none;
    -webkit-appearance: none; /* add this */
}