CSS 实现input自定义样式 | 您所在的位置:网站首页 › 表单边框颜色 › CSS 实现input自定义样式 |
边框
设置边框颜色
DOCTYPE html>
input文本框样式自定义
form {
padding: 20px;
background-color: #fffceb;
}
div {
margin-top: 20px;
}
label {
padding-right: 6px;
}
input {
width: 200px;
height: 26px;
line-height: 26px;
padding-left: 1em;
font-size: 12px;
}
.box{
border :1px solid red;
}
.boc{
border :1px solid #16a085;
}
文本框1
文本框2
页面效果: 设置无边框,分别设置有输入时边框和无输入时边框: .box{ border:0; } .boc{ border:0; outline:0; }页面效果: 页面效果: 页面效果: 光标默认情况下为黑色,设置字体颜色的时候,光标的颜色也会同时被改变。 可以使用 caret-color 单独设置光标颜色,如下: .box{ } .boc{ caret-color: red; }页面效果: 使用 :focus 选择器更改获取焦点时的样式,如下: input:focus { outline: 1px solid #AFECAB; }页面效果: input 的高度,可以使用 width 和 padding,宽度可以使用 width 改变,一般建议使用 padding去改变高度,因为有兼容的问题。如下: input { width: 200px; padding: 10px; }页面效果: 页面效果: |
CopyRight 2018-2019 实验室设备网 版权所有 |