Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

CSS3 美化表单

Posted on 2017年3月17日2017年3月18日 by king2088

表单美化在前端开发中经常使用到,CSS3中有很多对我们有利的伪类和属性选择器,今天主要来说说使用属性选择器和label来进行美化,不使用伪类。
首先,先来看下美化后的相关效果:

form表单美化
form表单美化

下面我们来看看实现的思想:
1、首先隐藏input
2、在label中设置背景即可

首先我们要先了解一下几个关于浏览器的知识点:
浏览器中,chrome在input的focus的时候会自动增加一个蓝色的外边框,以及select下拉,在Firefox和chrome下的显示都不一样,如下图chrome中的显示:

chrome下的input默认样式
chrome下的input默认样式

出现以上的问题,我们需要通过以下几个属性来解决:
select的小三角样式既然不一样,那么我们就将其删除,使用我们自己设定的图片或者svg,删除小三角的代码如下:
-webkit-appearance: none;
-webkit-tap-highlight-color: #fff;
appearance:none;
第二个,在chrome中出现的蓝色边框,可以直接设置outline的值为none来去除:
outline: none;
第三个问题,chrome中自动填充后,input背景会自动变为黄色的,如果input没有使用背景图片的话,那可以通过下面的css解决这个问题:
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
如果是使用的背景图片,那么上面这段代码将会覆盖了背景图片。因此我们就需要禁止input的自动填充功能了。直接在input后面增加一个属性autocomplete=”off”即可。而在本列中,我是使用背景图片的方法,因此只能直接牺牲自动完成的功能了。

点击复选框和单选框的过程中我使用了相应的css3动画。另外input[text]中我也使用了css3的过渡效果。

解决了以上3个问题,我们就可以开始美化input了
看代码:

Radio美化






CheckBox美化








input text


CSS3代码:

h1{
font-size: 28px;
}
.radio_all{
width: 80%;
margin: 10px auto;
font-size: 16px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.radio_all input[type='radio']{
display: none;
}
.radio_all input[type='radio'] + label{
display: inline-block;
background: url("svg/nocheck_16.svg") left center no-repeat;
cursor: pointer;
padding: 0 5px 0 18px;
margin-right: 10px;
}
.radio_all input[type='radio']:checked + label{
background: url("svg/check_16.svg") left center no-repeat;
-webkit-animation: bounce 0.3s;
-moz-animation: bounce 0.3s;
animation: bounce 0.3s;
}
.checkbox{
width: 80%;
margin: 10px auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.checkbox input[type='checkbox']{
display: none;
}
.checkbox input[type='checkbox'] + label{
left: 0;
display: inline-block;
background: url("svg/checkbox_16.svg") left center no-repeat;
cursor: pointer;
z-index: 2;
padding: 0 5px 0 18px;
}
.checkbox input[type='checkbox']:checked + label{
background: url("svg/icheckbox_16.svg") left center no-repeat;
-webkit-animation: bounce 0.3s;
-moz-animation: bounce 0.3s;
animation: bounce 0.3s;
}
.select{
width: 80%;
margin: 10px auto;
}
.select .i-select{
display: inline-block;
vertical-align: middle;
position: relative;
text-align: left;
/*删除小右侧三角*/
-webkit-appearance: none;
-webkit-tap-highlight-color: #fff;
appearance:none;
outline: 0;
/*删除小右侧三角 end*/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border:1px solid #DDD;
border-radius: 5px;
background: url("svg/select.svg") #EEE 98% center no-repeat;
padding: 10px 20px 10px 10px;
font-size: 16px;
overflow:hidden;
}
.select .i-select option{
padding: 10px;
border: 0;
}
.select .i-select option[selected]{ font-weight:bold; background: darkcyan}
.select .i-select option:nth-child(even) { background-color:#F2F2F2; }
.input-text{
width: 80%;
margin: 0 auto;
}
.input-text label{
text-align: justify;
word-spacing:8px;
letter-spacing: 1px;
width: 60px;
display: inline-block;
}
.input-text input[type='text']{
width: 200px;
border: 1px solid navajowhite;
padding: 10px 10px 10px 25px;
border-radius: 5px;
background: url("svg/account.svg") 6px center no-repeat;
}
.input-text input[type='text']:focus{
border: 1px solid salmon;
outline: none;
transition: all .3s;
}

@-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: scale(1);
}
50% {
-webkit-transform: scale(0.8);
}
}
@-moz-keyframes bounce {
0%, 100% {
-moz-transform: scale(1);
}
50% {
-moz-transform: scale(0.8);
}
}
@keyframes bounce {
0%, 100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
}

代码演示:https://jsfiddle.net/king2088/414dgz9g/1/

发表评论 取消回复

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

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 4月
一 二 三 四 五 六 日
 12
3456789
10111213141516
17181920212223
24252627282930
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme