INPUT 输入框和 BUTTON 按钮设计样式

于由何星星发布

目录
CSS
文本输入框样式
按钮类型样式
HTML
更多通用参考模板

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 条评论

发表回复

Avatar placeholder

您的电子邮箱地址不会被公开。 必填项已用 * 标注

相关文章

前端开发

前端项目功能 emoji 图标

介绍 📖版本 📦功能 🔨环境 🏝️步骤 📔代码 🔗依赖 📌配置 🛠️启 阅读更多…

前端开发

通过 CSS 在指定内容的前后添加指定符号

定义 在 code 标签前添加`符号 code::before { c 阅读更多…

前端开发

Sublime Text 快速插入当前日期时间

配置环境 打开 Sublime Text 3，点击菜单栏的 Prefe 阅读更多…