一、去掉input的默认边框
在CSS中,当设置元素的border属性时,会有默认的边框样式,所以第一步就是要将input的默认边框去掉。
input {
border: none;
}
通过将border属性设为none,即可去掉默认的边框样式。
二、input去掉外边框
如果只是要去掉input的外边框,可以将outline属性设为none。
input {
outline: none;
}
这样,就可以将input的外边框去掉,但内部仍保留着默认边框。
三、input框去掉边框
如果要将input完全去掉边框,包括内部的默认边框,可以使用下面的代码:
input {
border: none;
outline: none;
background: transparent;
}
这将去掉内外两层边框,并将背景设置为透明,可以看到input中的内容,但不再有边框。
四、input点击时去掉边框
当input被点击时,有时会出现蓝色边框,可以通过下面的代码去掉:
input:focus {
outline: none;
}
使用:focus伪类,只有当input被激活时才消除边框。
五、input有个框怎么取消
如果input有一个框,使用同样的方法:
input {
border: 1px solid black;
outline: none;
background: transparent;
}
input:focus {
outline: none;
}
这样,即可将input的框去掉,并且点击时也不会出现边框。
六、input选中后去掉蓝色
有时候,input选中时会出现蓝色高亮,在CSS中可以使用::selection伪类将其去掉:
input::-moz-selection { /* Firefox */
background-color: transparent;
}
input::selection {
background-color: transparent;
}
这将去掉input选中后的蓝色高亮。
七、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;
}
这样不仅去掉了内部的默认边框,还去掉了外部的边框,并且点击时不会出现边框。
九、input标签去掉边框
如果想统一去掉所有input标签的边框,可以使用下面的代码:
input {
border: none;
outline: none;
background: transparent;
}
input:focus {
outline: none;
}
这样所有input标签的边框都会被去掉,并且点击时不会出现边框。