☞☞☞2019年千锋教育最新视频课程-速速收藏☜☜☜

酷炫的文本框

我们在网页中经常可以看到一些酷炫的文本框，一些比较复杂，一些比较简单，今天我们来看一个纯CSS的文本框。先上效果。

一、先来看看html标签部分

<!DOCTYPE html>

  <html lang="en">

  <head>

    <meta charset="UTF-8">

    <title>Title</title>

  </head>

  <body>

    <form  action="#" method="get" id="form">

        <div class="inputs">

            <input type="text" id="texts">

            <label for="texts">用户名：</label>

            <span onclick="this.parentElement.firstElementChild.value=''">&times;</span>

        </div>

        <div class="inputs">

            <input type="password" id="password">

            <label for="password">密 &nbsp;码：</label>

            <span onclick="this.parentElement.firstElementChild.value=''">&times;</span>

        </div>

    </form>

  </body>

  </html>

第一步在body中做了一个大容器form，这个容器的id叫form，这是一个表单容器，用来将所有的文本框提交给后端程序的。
在这个form表单容器中新增两个div，我们可以把div看作一个容器，就像一个我们快递过来的包装盒子一样。给div增加一个class是inputs，后面我们将尝试在css中增加这个class的样式，那样的话我们可以让任何一个class是inputs的div拥有同样的效果，简直棒极了，我们不需要给每个都设置效果了。
给每个div中放置同样的3个标签
1. 第一个是input，这是核心，文本框标签，我们可以在这里输入任何文字，注意这个标签中有一个属性type，如果设置成text就是文本，如果设置成password就会是密码，设置成密码后就看不到了，变成了黑色的圆点，不要害怕，它只是看不到，但是程序会记录你输入了什么，当然还会有更多的类型等待你探讨了，这里就不做详细说明了。注意：一定要给input设置一个id的属性，这个属性是唯一标识这个文本框的名字，不能重复哦。
2. 第二个是label，这就是文本框前面的文本了，我们可以设置一个for的属性关联到指定的input文本框的id上，这样label就会与文本框绑定在一起了，点击label时也会激活文本框哦。
3. 第三个是span。好吧，它只是行内元素，一个没有宽高的行内元素，用来包裹一些字符或者图片，这样就可以给这些包裹的内容做统一设置了。这里我们包裹了一个×这是一个实体字符，实际表现的样式就是一个x的样子，就像关闭按钮一样。
4. Span中增加一个属性叫做onclick，这个属性的意思是当点击这个span标签时，也就是里面那个x时。this.parentElement.firstElementChild.value=''。分解一下，this这里就是被点击的span，parentElement，虽然看起来很长，实际上就是这个span所对应的上一层容器，也就是span外面包裹的div容器。firstElementChild，这个是第一个子元素，就是刚才得到的div容器里面第一个标签，当然这个标签就是input那个文本框了。最后的value就是值，刚才找到input的文本框的内容，设置为’’这表示让文本框里面的内容清空。连起来的意思就是找到span的父级容器下的第一个子元素设置它的内容清空。
5. 好了到此为止HTML标签部分我们就解释完了。我们来看看效果吧。你可以在文本框中输入一些文字，然后点击后面的x，看看是否文本框被清空了。

这个似乎距离我们最后的效果差距很远哦。没错HTML标签只是基本的结构，美化就需要CSS，就是我们的层叠式样式表了。

CSS部分的样式设置

首先在html的head标签中增加一个<style></style>，我们的css样式都会写在这个标签里
设置所有的标签的margin和padding都是0，这样可以去除不同的浏览器中默认设置间距。

*

  {

    margin: 0;

    padding: 0;

}

设置id是form的表单容器样式
Margin:50px auto 这是设置表单水平居中，垂直上下外边距50像素
Width：350px，设置表单的宽度是350像素

#form

  {

    margin: 50px auto;

    width: 350px;

}

.input就是所有的class是input的标签，因此我们这里只要设置一个，所有class是input的标签都被应用了这个样式。这里我们设置这些class为input的div容器的上下外边距是10px，左右外边距是0，然后设置它是相对定位position:relative。相对定位是一种占位定位方式，为什么我们要这里使用相对定位了，因为这个div容器的里面有标签要绝对定位，一般来说我们要设置绝度定位，它的父容器就要相对定位。关于这个知识点我们后面再说。

.inputs

  {

    margin:10px 0;

    position: relative;

}

看到了吧，现在两个文本框之间的距离被推开了。上下间有了距离这就是那个margin中第一位设置10px的作用，意思是上下外边距设置为10px，第二位是0，意思是左右外边距设置为0
.input input 第一个.input就是我们设置的div后面用一个空格然后再写了一个input，注意前后input不一样，前面的有.，后面的没有，前面的是class是input，后面的是标签名是input的。空格的含义是后代，意思是class是input的div容器的子容器中input标签的样式
Width:250px,height:50px，就是设置这个文本框的宽高时250和50像素。
Font-size:20px，这是设置文本框中文字大小是20像素
Line-height：50px，这句是设置行高是50像素，我们发现这个行高于文本框高度相同，也就是说文本框就一行，这样，文本就会垂直居中在文本框内了

Border:1px solid #999999 这是设置边框是1像素灰色的直线

Outline-offset:-1px 设置外边线是-1，这里的值是外边线距离文本框的距离，如果设置为-1就会与边线重合在一起后面我们用来做动画效果时用的。

outline: 1px solid #999999FF这是设置外边线也是1像素实线灰色不透明的线条。注意设置了outline后那个蓝色发光边线就变成灰色了

box-shadow: 3px 3px 10px #999999 inset;设置文本框中的阴影效果，前面两个3px是水平垂直的偏移，后面10px是阴影的模糊半径。#999999是阴影的颜色，inset是内部阴影。

padding-left: 100px 设置了padding-left文字在文本框中不在最前面了，被推到了100像素的位置

.inputs input

  {

    width: 250px;

    height: 50px;

    font-size: 20px;

    line-height: 50px;

    border: 1px solid #999999;

    outline-offset:-1px;

    outline: 1px solid #999999FF;

    box-shadow: 3px 3px 10px  #999999 inset;

    padding-left: 100px;

}

.input label 和上面相同这就是说设置class是input的div的后代容器中的label标签样式。

position: absolute;绝对定位

left: 10px;距离左边是10像素
top: 16px;距离顶端是16像素

我们使用定位技术，外容器是相对定位，因此，这里的label就是相对外容器div的绝对定位。那么label就脱离了文档流悬浮在这个div中了。位置到了距离左端10像素，距离顶端16像素。看后面的lable到了文本框前面了。

这时候文本之间的位置有点紧，我们可以设置letter-spacing: 5px;把间距调节的宽一点。

.inputs label

  {

    position: absolute;

    left: 10px;

    top: 16px;

    letter-spacing: 5px;

}

.input span，就是设置样式是input的div的后代中span标签的样式

position: absolute;绝对定位
right: 5px;
top: 16px;

同样给span设置绝对定位以后距离右端5像素，顶部16像素，我们看到x到了最右边

color: #999999; 设置文字颜色是灰色，这样那个x就变成灰色了

因为span是行内元素，不能设置宽高，因此我们设置为行内块元素，这样它既具备的行内元素的特点，又可以设置宽高了但是下面的box-shadow会把span变成行内块元素
         width: 20px;   设置宽高是20像素
         height: 20px;
         box-shadow: 0 0 10px #999999 inset;设置引用是内发光，发光模糊度是10像素灰色，这里水平垂直的偏移的是0，表示仅原位置发光，inset就是向内，因此就是内发光了
         text-align: center; 这句意思让这个x水平居中
         line-height: 20px; 设置行高后垂直居中

border-radius: 10px; 边线圆角半径10像素
user-select: none; 用户不能选择，鼠标经过时不是文本选中样式

display: none; 初始不显示
这里让清除按钮的样式设置圆形，然后不能点击

.inputs span{

    position: absolute;

    right: 5px;

    top: 16px;

    color: #999999;

display: inline-block;

    width: 20px;

    height: 20px;

    box-shadow: 0 0 10px #999999 inset;

    text-align: center;

    line-height: 20px;

    border-radius: 10px;

    user-select: none;

display: none;

}

上面我们让关闭按钮隐藏了，这里就该设置鼠标经过这个文本框的时候显示出来

.input:hover span

这个是鼠标经过class是input的div，设置它的后代项中的span标签。

display: inline-block;设置这个span标签是行内块元素，这时候就显示出来了

.inputs:hover span

  {

    display: inline-block;

}

最后我们设置动画效果了

outline-offset: 10px; 设置外边框线偏移10像素
outline:1px solid #99999900; 设置外边框线完全透明
transition: all 1s; 设置动画持续1秒所有属性变化都可以动画

.inputs input:hover

  {

    outline-offset: 10px;

    outline:1px solid #99999900;

    transition: all 1s;

}

最终的效果就完成了。

千锋H5教程系列—酷炫的文本框

☞☞☞2019年千锋教育最新视频课程-速速收藏☜☜☜

酷炫的文本框

一、先来看看html标签部分

猜你喜欢