覆盖Chrome UA文本输入样式

Question

因此在Chrome文本输入被添加边界像2px inset。 我所得到的是：

.search-form p input[type=text] {  
    width: 170px;   
} 

而.search-form是：

.search-form { 
    width: 174px;  
    padding: 10px; 
    border: 1px solid #F2E1D5; 
} 

如何查看这是否是一个Chrome的UA或以其他方式我怎么重写规则？

Answer 1

为Chrome relaing到输入的默认样式看起来是这样的：

input, input[type="password"], input[type="search"], isindex { 
    -webkit-appearance: textfield; 
    padding: 1px; 
    background-color: white; 
    border: 2px inset; 
    border-image: initial; 
    -webkit-rtl-ordering: logical; 
    -webkit-user-select: text; 
    cursor: auto; 
} 

input, textarea, keygen, select, button, isindex { 
    margin: 0em; 
    font: -webkit-small-control; 
    color: initial; 
    letter-spacing: normal; 
    word-spacing: normal; 
    line-height: normal; 
    text-transform: none; 
    text-indent: 0px; 
    text-shadow: none; 
    display: inline-block; 
    text-align: -webkit-auto; 
} 

所以，仅仅覆盖那些有自己的属性。假设你希望事物在任何地方看起来都一样，所以只需按照自己喜欢的样式设计边框。