简单的输入框焦点动画效果

栏目: Html · 发布时间: 6年前

核心属性

::placeholder 改变输入框中占位文字的样式

:focus + width + color + text-align 鼠标点击输入框后改变它和占位文字的样式

text-indent: -9999px 隐藏按钮中的文字

:focus + display + background-size 鼠标点击输入框后出现右边的图标按钮

```
<div class="wrapper">
```
```
<div class="middle">
```

<input type="email" value="" name="EMAIL" class="email-field" id="email-field" placeholder="输入文字">

<input type="submit" value="Subscribe" name="subscribe" id="subscribe-button" class="">

```
</div>
```
```
</div>
```

```
body {
```
```
color: #efaa9d;
```
```
background-color: #f05133;
```
```
text-align: center;
```
```
}
```
```
::placeholder {
```
```
color: #f4f2ca;
```
```
opacity: .8;
```
```
}
```
```
.email-field {
```
```
display: inline-block;
```
```
width: 80px;
```
```
padding: .9em 1.8em;
```
```
color: #f4f2ca;
```
```
background-color: #d8492e;
```
```
border: none;
```
```
border-radius: 4px;
```
```
outline: none;
```
```
cursor: pointer;
```
```
text-align: center;
```
```
transition: all .1s linear;
```
```
}
```
```
.email-field:hover {
```
```
background-color: #d0432a;
```
```
}
```
```
.email-field:focus {
```
```
width: 200px;
```
```
color: #efaa9d;
```
```
outline: none;
```
```
text-align: left;
```
```
cursor: inherit;
```
```
}
```
```
#subscribe-button {
```
```
display: none;
```
```
width: 35px;
```
```
height: 35px;
```
```
border: none;
```

background: url(https://pics.codecolor.cn/morphing-input/arrow-circle-on-right.svg) no-repeat;

```
background-size: 13px;
```
```
background-position: 0 1px;
```
```
text-indent: -9999px;
```
```
opacity: .25;
```
```
cursor: pointer;
```
```
transition: all .2s linear;
```
```
}
```
```
#subscribe-button:hover {
```
```
opacity: .33;
```
```
}
```

.email-field:focus + #subscribe-button {

```
display: inline-block;
```
```
background-size: 33px;
```
```
}
```

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

颠覆式创新：移动互联网时代的生存法则

李善友 / 机械工业出版社 / 2015-3-1

为什么把每件事情都做对了，仍有可能错失城池？为什么无人可敌的领先企业，却在一夜之间虎落平阳？短短三年间诺基亚陨落，摩托罗拉以区区29亿美元出售给联想，芯片业霸主英特尔在移动芯片领域份额几乎为零，风光无限的巨头转眼成为被颠覆的恐龙，默默无闻的小公司一战成名迅速崛起，令人瞠目结舌的现象几乎都能被“颠覆式创新”法则所解释。颠覆式创新教你在新的商业竞争中“换操作系统”而不是“打补丁”，小公司用破坏......一起来看看《颠覆式创新：移动互联网时代的生存法则》这本书的介绍吧!

码农工具

简单的输入框焦点动画效果

核心属性

颠覆式创新：移动互联网时代的生存法则

在线进制转换器

Base64 编码/解码

html转js在线工具