覆蓋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; 
} 

所以，僅僅覆蓋那些有自己的屬性。假設你希望事物在任何地方看起來都一樣，所以只需按照自己喜歡的樣式設計邊框。