注册
登录
前言浏览器自带的input标签，例如text,radio,checkbox的样式都显得很难看，虽然已经有类似于Bootstrap这种稳定的类库可以使用，但是对于定制化的input样式同样难以满足，今天我们就自己动手，一起来看看如何使用CSS3实现一个好看的input样式。
CSS3 如果感兴趣的，可以去github上去看源码进行学习，地址如下：
input-text首先我们来看下type为text的文本框元素，实现的动态效果如下图所示。
效果图 实现过程接下来我们来看看这样的效果是如何实现的。页面上的元素主要是以下几个部分。
我们需要达到的效果是，在未点击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样式的文章，敬请期待~ |
| 本文出处： http://www.toutiao.com/a6420516521524740354/ |
|
声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系
[邮箱地址] 删除
|
