Question

我正在一个具有响应式设计的网站上工作我正面临着不同设备上的表单字段的渲染问题。浏览器。

适用于手机上的Firefox和Tab（Android）它以不同的方式呈现表单字段，无论是圆角还是渐变样式。

如何使它们看起来像带边框的简单矩形。

我申请的CSS是

input 
{
     box-sizing: border-box;
-moz-user-input:none;
-moz-user-select:none;
border: 1px solid #ccc;
font-size: 12px;
height: 30px;
line-height:30px;
vertical-align:middle;
padding-left: 5px;
color:#687074;
}
select {
border: 1px solid #ccc;
font-size: 13px;
height: 36px;
line-height:36px;
vertical-align:middle;
padding-left: 5px;
color:#687074;
}

我尝试过可以打开，但它仍然有所不同。

我在jsfiddle Frame only Editable version

上有设置示例

这些表单字段在字段内带有show或gradient。我怎样才能删除所有这些并使其变得简单，边框为1px

Answer 1

尝试添加：

input:focus, select:focus {
    outline: none;
}
input, select{
    -webkit-appearance: none;
    border-radius:0;
    background-image: none;
    background-color:transparent;
}

表单字段在不同设备上呈现不同

1 个答案: