一、去掉input的默認(rèn)邊框
在CSS中，當(dāng)設(shè)置元素的border屬性時，會有默認(rèn)的邊框樣式，所以第一步就是要將input的默認(rèn)邊框去掉。
input {
border: none;
}
通過將border屬性設(shè)為none，即可去掉默認(rèn)的邊框樣式。
二、input去掉外邊框
如果只是要去掉input的外邊框，可以將outline屬性設(shè)為none。
input {
outline: none;
}
這樣，就可以將input的外邊框去掉，但內(nèi)部仍保留著默認(rèn)邊框。
三、input框去掉邊框
如果要將input完全去掉邊框，包括內(nèi)部的默認(rèn)邊框，可以使用下面的代碼：
input {
border: none;
outline: none;
background: transparent;
}
這將去掉內(nèi)外兩層邊框，并將背景設(shè)置為透明，可以看到input中的內(nèi)容，但不再有邊框。
四、input點擊時去掉邊框
當(dāng)input被點擊時，有時會出現(xiàn)藍(lán)色邊框，可以通過下面的代碼去掉：
input:focus {
outline: none;
}
使用:focus偽類，只有當(dāng)input被激活時才消除邊框。
五、input有個框怎么取消
如果input有一個框，使用同樣的方法：
input {
border: 1px solid black;
outline: none;
background: transparent;
}
input:focus {
outline: none;
}
這樣，即可將input的框去掉，并且點擊時也不會出現(xiàn)邊框。
六、input選中后去掉藍(lán)色
有時候，input選中時會出現(xiàn)藍(lán)色高亮，在CSS中可以使用::selection偽類將其去掉：
input::-moz-selection { /* Firefox */
background-color: transparent;
}
input::selection {
background-color: transparent;
}
這將去掉input選中后的藍(lán)色高亮。
七、input去掉右邊框
如果只是想去掉input的右邊框，可以使用border-right屬性：
input {
border: none;
border-right: 1px solid black;
}
這樣，將保留其他三個邊框，并去掉右邊框。
八、input去除外邊框
如果要將input的外邊框也去掉，可以使用下面的代碼：
input[type="text"] {
border: none;
outline: none;
background: transparent;
}
input[type="text"]:focus {
outline: none;
}
這樣不僅去掉了內(nèi)部的默認(rèn)邊框，還去掉了外部的邊框，并且點擊時不會出現(xiàn)邊框。
九、input標(biāo)簽去掉邊框
如果想統(tǒng)一去掉所有input標(biāo)簽的邊框，可以使用下面的代碼：
input {
border: none;
outline: none;
background: transparent;
}
input:focus {
outline: none;
}
這樣所有input標(biāo)簽的邊框都會被去掉，并且點擊時不會出現(xiàn)邊框。
京公網(wǎng)安備 11010802030320號