自定义 input、textarea、secelt、input[type="button"] 样式
1. input 和 textare 的效果一样，分为 静态样式、hover 样式 和 focus 样式
-
静态样式
input ,textarea {
height: 24px;
border-radius: 2px;
padding: 3px;
border: 1px solid #C6C6C6;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0);
}
效果图：
static style
-
hover 样式
input:hover ,textarea:hover {
border: 1px solid #C6C6C6;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
color: #333333;
}
效果图：
hover style
-
focus 样式
input:focus, textarea:focus {
box-shadow: 0 1px 1px rgba(0, 0, 0, 1);
outline: none; /* 讨人厌的默认 outline 蓝色轮廓*/
}
效果图：
focus style
2. select 样式
select {
width: 100px;
height: 30px;
outline: none;
background: white;
border-radius: 2px;
}
效果图：
select style
3. input[type="button"] 样式
input[type="button"] {
user-select: none;
background-color: rgba(231, 201, 154, 0.5);
border: 1px solid rgba(231, 201, 154, 0.1);
border-radius: 5px;
height: 35px;
width: 100%;
font-size: 20px;
font-weight: bold;
line-height: 27px;
padding: 0 10px;
}
input[type="button"]:hover {
background-color: rgba(231, 201, 154, 0.8);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
input[type="button"]:focus {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
}
效果图：
static style
hover style
focus style
