CSS
文本输入框样式
input[type=text]
input[type=text] { /*默认状态下样式*/
border: 0;
border-bottom: 1px solid #9e9e9e66;
display: block;
outline: none;
}
input[type=text]:hover { /*悬停状态下样式*/
border-color: #666;
}
input[type=text]:active { /*点击状态下样式*/
border-color: #000;
}
按钮类型样式
input[type="button"], input[type="reset"], input[type="submit"]
以上依次是普通按钮、重置按钮、提交按钮的类型,以及还有更多的 checkbox,radio,password,image,file,color,date,datetime,datetime-local,month,week,time,email,tel,url,search
等类型,其中很多是 HTML5 新增的特性,根据不同场景需求修改类型参数即可。
input[type=button] { /*默认状态下样式*/
cursor: pointer;
border: none;
outline: none;
border-radius: 3px;
background: #007bff8f;
}
input[type=button]:hover { /*悬停状态下样式*/
background-color: #007bffdb;
}
input[type=button]:active { /*点击状态下样式*/
background-color: #007bfff5;
}
HTML
<input type="text" class="formControl">
<input type="submit" class="buttonForm" value="提交">
更多通用参考模板
/* ======== INPUT ======== */
input[type=text] { /*默认状态样式*/
margin: 5px 0 8px 0;
padding: 10px;
border-radius: 3px;
height: 50px;
width: 100%;
border: 1px solid #9e9e9e66;
display: block;
outline: none;
}
input[type=text]:hover { /*悬停样式*/
border-color: #007bff8f;
}
input[type=text]:active { /*点击样式*/
border-color: #007bff;
}
input[type=text]:visited { /*点击后样式*/
border-color: #fff;
}
input[type=email] { /*默认状态样式*/
margin: 5px 0 8px 0;
padding: 10px;
border-radius: 3px;
height: 50px;
width: 100%;
border: 1px solid #9e9e9e66;
display: block;
outline: none;
}
input[type=email]:hover { /*悬停样式*/
border-color: #007bff8f;
}
input[type=email]:active { /*点击样式*/
border-color: #007bff;
}
input[type=email]:visited { /*点击后样式*/
border-color: #fff;
}
input[type=password] { /*默认状态样式*/
margin: 5px 0 8px 0;
padding: 10px;
border-radius: 3px;
height: 50px;
width: 100%;
border: 1px solid #9e9e9e66;
display: block;
outline: none;
}
input[type=password]:hover { /*悬停样式*/
border-color: #007bff8f;
}
input[type=password]:active { /*点击样式*/
border-color: #007bff;
}
input[type=password]:visited { /*点击后样式*/
border-color: #fff;
}
/* ======== BUTTON ======== */
input[type=button] { /*默认状态样式*/
cursor: pointer;
border: none;
outline: none;
border-radius: 3px;
background: #007bff8f;
}
input[type=button]:hover { /*悬停样式*/
background-color: #007bffdb;
}
input[type=button]:active { /*点击样式*/
background-color: #007bfff5;
}
input[type=submit] { /*默认状态样式*/
cursor: pointer;
border: none;
outline: none;
border-radius: 3px;
background: #007bff8f;
}
input[type=submit]:hover { /*悬停样式*/
background-color: #007bffdb;
}
input[type=submit]:active { /*点击样式*/
background-color: #007bfff5;
}
input[type=submit].query { /*默认状态样式*/
cursor: pointer;
border: none;
outline: none;
border-radius: 3px;
background: #00000059;
}
input[type=submit].query:hover { /*悬停样式*/
background-color: #00000085;
}
input[type=submit].query:active { /*点击样式*/
background-color: #00000099;
}
input[type=submit].failure { /*默认状态样式*/
cursor: pointer;
border: none;
outline: none;
border-radius: 3px;
background: #00000059;
}
input[type=submit].failure:hover { /*悬停样式*/
background-color: #00000085;
}
input[type=submit].failure:active { /*点击样式*/
background-color: #00000099;
}
input[type=submit].reload { /*默认状态样式*/
cursor: pointer;
border: none;
outline: none;
border-radius: 3px;
background: #ad7eeffa;
}
input[type=submit].reload:hover { /*悬停样式*/
background-color: #9553f2fa;
}
input[type=submit].reload:active { /*点击样式*/
background-color: #ad7bf1f0;
}
input[type=submit].showcode { /*默认状态样式*/
cursor: pointer;
border: none;
outline: none;
border-radius: 3px;
background: #28d591fa;
}
input[type=submit].showcode:hover { /*悬停样式*/
background-color: #0cb472fa;
}
input[type=submit].showcode:active { /*点击样式*/
background-color: #1f9f6de8;
}
input[type=submit].sequenceOfFail { /*默认状态样式*/
cursor: pointer;
border: none;
outline: none;
border-radius: 3px;
background: #3dc73785;
}
input[type=submit].sequenceOfFail:hover { /*悬停样式*/
background-color: #3dc737ab;
}
input[type=submit].sequenceOfFail:active { /*点击样式*/
background-color: #3dc737d6;
}
input[type=submit].sequenceOfWait { /*默认状态样式*/
cursor: pointer;
border: none;
outline: none;
border-radius: 3px;
background: #29dba1c2;
}
input[type=submit].sequenceOfWait:hover { /*悬停样式*/
background-color: #30e5aac2;
}
input[type=submit].sequenceOfWait:active { /*点击样式*/
background-color: #2defafe6;
}
input[type=submit].sequenceOfAlls { /*默认状态样式*/
cursor: pointer;
border: none;
outline: none;
border-radius: 3px;
background: #40d2f3cc;
}
input[type=submit].sequenceOfAlls:hover { /*悬停样式*/
background-color: #2ccdf2f2;
}
input[type=submit].sequenceOfAlls:active { /*点击样式*/
background-color: #0fc5eff2;
}
input[type="checkbox" i] { /*复选框强制恢复自定义样式*/
background-color: initial!important;
cursor: default!important;
appearance: auto!important;
-webkit-appearance: auto!important;
-moz-appearance: auto!important;
-o-appearance: auto!important;
appearance: auto!important;
box-sizing: border-box!important;
padding: initial!important;
border: initial!important;
transform: translateY(2px);
}
input.serachForDash{
width: 73.33333%;
display: initial;
}
input::-webkit-input-placeholder {
color: #ddd!important;
}
input:-moz-placeholder {
color: #ddd!important;
}
input::-moz-placeholder {
color: #ddd!important;
}
input:-ms-input-placeholder {
color: #ddd!important;
}
input:-internal-autofill-previewed,
input:-internal-autofill-selected { /*定义自动填充用户信息的输入框默认背景颜色*/
-webkit-text-fill-color: #333 !important;
transition: background-color 5000s ease-in-out 0s !important;
}
/* ======== TEXTAREA ======== */
textarea[type=text] { /*默认状态样式*/
margin: 5px 0 8px 0;
padding: 10px;
border-radius: 3px;
height: 50px;
width: 100%;
border: 1px solid #9e9e9e66;
display: block;
outline: none;
}
textarea[type=text]:hover { /*悬停样式*/
border-color: #007bff8f;
}
textarea[type=text]:active { /*点击样式*/
border-color: #007bff;
}
textarea[type=text]:visited { /*点击后样式*/
border-color: #fff;
}
/* ======== SELECT ======== */
select.searchForDashSelecter{ /*默认样式*/
width: 25.99999%;
height: 50px;
font-size: 12px;
color: #7f7f7f;
outline: none;
border: 1px solid #9e9e9e66;
border-radius: 3px;
padding: 10px;
margin: 5px 0 8px 0;
}
select.searchForDashSelecter:hover { /*悬停样式*/
border-color: #007bff8f;
}
select.searchForDashSelecter:active { /*点击样式*/
border-color: #007bff;
}
select.searchForDashSelecter:visited { /*点击后样式*/
border-color: #fff;
}
/* ======== @MEDIA ======== */
@media screen and (max-width: 768px) {
select.searchForDashSelecter{
width: 100%;
height: 50px;
font-size: 14px;
color: #7f7f7f;
outline: none;
border: 1px solid #9e9e9e66;
border-radius: 3px;
padding: 10px;
margin: 5px 0 8px 0;
}
input.serachForDash{
width: 100%;
display: initial;
}
}
友情提示:本站所有文章,如无特殊说明或标注,均为何星星原创发布。与此同时,趋于近年来本站的文章内容频繁被他站盗用与机器采集,现已全局禁用网站文字内容操作,了解详情或转载文章请 点此 继续!
0 条评论