一、取消邊框
眾所周知，input標籤的邊框是默認存在的，而有時候我們需要去掉邊框，這時候我們可以通過CSS的border樣式來實現。
input {
border: none;
}
上述代碼會將所有input標籤的邊框都去掉，如果只想針對某個特定的input標籤去掉邊框，可以通過為其設置class或id來實現。
二、取消陰影
除了邊框之外，input標籤還可能有默認的陰影效果。這種陰影效果可彰顯出標籤的立體感，但在一些特定場景下，這種效果可能不得不被取消。
input {
box-shadow: none;
}
上述代碼會將所有input標籤的陰影都去掉，同樣地，可以通過為其設置class或id來實現只針對某些標籤去掉陰影。
三、選取特定的input標籤
如果我們只想只對某一部分的input標籤進行操作，可以通過CSS的屬性選擇器來實現。
input[type="text"] {
border: none;
outline: none;
}
input[type="submit"] {
border: none;
background-color: #666;
color: #fff;
padding: 10px;
}
上述代碼分別操作了type屬性為text和submit的input標籤。對於type為text的標籤，去掉了邊框和默認的外輪廓線；對於type為submit的標籤，同時去掉了邊框並設置了一些樣式來使其更易於辨識。
四、使用CSS框架
如果你對CSS並不十分熟悉，那麼也可以使用一些CSS框架來幫助你快速地實現代碼的效果，比如Bootstrap庫。
上述代碼使用了Bootstrap庫中提供的樣式類幫助我們快速地去掉了input標籤的邊框和陰影。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/250491.html
微信掃一掃 
支付寶掃一掃 