CSS3的hover+transition实现输入框的渐变色

最新推荐文章于 2024-08-05 11:08:15 发布

_南天北落

最新推荐文章于 2024-08-05 11:08:15 发布

阅读量6.2k

点赞数

分类专栏：技术记录文章标签： CSS3 hover transition 渐变色圆角输入框

本文链接：https://blog.csdn.net/my_God_sky/article/details/10043975

版权

技术记录专栏收录该内容

16 篇文章 0 订阅

订阅专栏

CSS3支持渐变色，我做的是一个登录界面；圆角的文本输入框，这些用CSS3的标准来做很简单。

CSS代码：

<span style="white-space:pre">	</span>.user_input{
    		border: 1px solid rgb(195, 190, 186);
    		border-radius:5px 5px 5px 5px;
    		-moz-border-radius:5px;
    		-webkit-border-radius:5px;
    		width: 85px;
    		transition:all 0.5s ease-out 0s;
    	}

上面有transition但是transition要用到hover的样式。

CSS的hover代码：

<span style="white-space:pre">	</span>.user_input:hover{
    		border-color: #989B9B;
    		border:1.5px solid;
	}

下面的页面上的代码：

<table>
	<tr>
		<td>用户名：</td>
		<td><input type="text" id="userName"  class="user_input"/></td>
		<td rowspan="2"><img src="../../../imgs/login.png"></img></td>
	</tr>
	<tr>
		<td>密　码：</td>
		<td><input type="password" id="userPass" class="user_input"/></td>
	</tr>						
</table>

这样的话，圆角的文本输入框+渐变色就可以了。下面是效果图，用户名框和密码框根据鼠标移动来渐变色。