自定義 input、textarea、secelt揽惹、input[type="button"] 樣式
1. input 和 textare 的效果一樣汗茄，分為 靜態(tài)樣式昼榛、hover 樣式 和 focus 樣式
-
靜態(tài)樣式
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
