整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
文章介绍了html标签里的input标签和label标签的美化效果！效果图如下：
用在复选框中选择，个性化了复选框的默认样式，增强用户体验！
实现方法也非常简单
下面看看代码
html:
css:
浏览器自带的input标签，例如text,radio,checkbox的样式都显得很难看，虽然已经有类似于Bootstrap这种稳定的类库可以使用，但是对于定制化的input样式同样难以满足，今天我们就自己动手，一起来看看如何使用CSS3实现一个好看的input样式。
CSS3
如果感兴趣的，可以去github上去看源码进行学习，地址如下：
https://github.com/zhouxiongking/article-pages/tree/master/articles/beautifulInput
首先我们来看下type为text的文本框元素，实现的动态效果如下图所示。
效果图
接下来我们来看看这样的效果是如何实现的。页面上的元素主要是以下几个部分。
input元素，将其border设置为none
label元素，与input元素绑定
div元素，实际为下面的横线
我们需要达到的效果是，在未点击input元素时，通过label元素显示提示信息；在input元素获得焦点后label元素会移动到input元素上面，并且显示出动态的获取焦点的过程，此后可以在input元素中正常输入信息。
首先我们来看看HTML部分的代码。
HTML代码
通过html部分代码，可以看出页面主要由input，label，div三个元素构成。
然后我们再来看看CSS部分的代码，由于CSS部分代码比较多，我们拆开来看。
先看最外层的容器样式代码如下。
外层容器
然后是input标签的样式，在CSS3中提供了placehoder的样式，在这里为了防止placeholder属性会覆盖到label标签，我们将其透明度设置为0。关于input元素以及其placeholder属性值的css样式部分如下所示。
input样式
紧接着是下面的label标签的样式，因为在input获取焦点时，label元素会移动到input上方，因此需要给label元素加上一个动画效果。label部分代码如下所示。
label部分代码
其次是最下面的一条横线，在input元素未获取焦点的状态下，其长度为0。
横线
最后是在input获取焦点后的样式变化，下面的横线会逐渐延长至最大宽度，而且具有不同的颜色，这一动态效果由下面的代码决定。
获取焦点动态效果
至此，页面上所有的代码均已完成，在浏览器中运行页面后会看到文章开始时的效果。
在万千已经成型的前端框架中，自己写出一个样式也算是一种收获，在后面的文章中，我会继续写关于如何实现checkbox和radio样式的文章，敬请期待~
完了标签属性后，接着说下HTML中最后的标签--label
<label>标签为input元素定义标注，用于绑定一个表单元素，当点击一个<label>标签内的文本时，浏览器就会自动讲焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验。接着看下语法:
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
<label>里的for和<input>里的id需要对应起来，值需要是一样的。即核心点为: <label>标签的for属性应当与<input>元素的id属性相同。可以看下效果:
首先是名称+单选框
之前点击单选框，必须要点击到小圆圈按钮处才行，现在点击颜色+小圆圈区域就可以了。
来看看代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label for="color">
颜色
</label>
<input type="radio" name="红色" id="color">
</body>
</html>
其中for和id都是color, 我们加上复选框看看效果
点击后的效果:
然后看看已经添加了的代码:
<label for="color">
颜色
</label>
<input type="radio" name="红色" id="color">
蓝色<input type="checkbox" name="蓝色" id="color">
绿色<input type="checkbox" name="绿色" id="color">
紫色<input type="checkbox" name="紫色" id="color">
这里就多了复选框，但是发现点击文字不能勾选，然后是没有加<label>标签属性，我们再加上试试(终于写出来代码bug)
看下如何修改的代码:
<body>
<label for="color">
颜色
</label>
<input type="radio" name="红色" id="color">
<input type="checkbox" name="蓝色" id="color1"><label for="color1">蓝色</label>
<input type="checkbox" name="绿色" id="color2"><label for="color2">绿色</label>
<input type="checkbox" name="紫色" id="color3"><label for="color3">紫色</label>
</body>
每一个控件都会有一个label和一个id一一对应
好的，今天就先这样了
*请认真填写需求信息，我们会在24小时内与您取得联系。
