input表单元素外发光效果

最新推荐文章于 2023-06-23 14:47:38 发布

原创最新推荐文章于 2023-06-23 14:47:38 发布 · 3.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#input外发光

html5+css3 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用CSS为input和textarea元素创建聚焦时的外发光效果。通过定义不同类型的input元素在焦点状态下的border颜色、阴影以及过渡效果，实现了美观的界面反馈。示例代码包括CSS样式和HTML结构，以及最终效果的截图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<pre name="code" class="css">

<pre code_snippet_id="371189" snippet_file_name="blog_20140531_1_3034260" name="code" class="html">CSS代码部分：

<pre name="code" class="css">p{ padding:5px; margin:0;}
input ,textarea{
	padding:5px;
	color:#999;
	border-radius:3px;
	border:1px solid #ccc;
}
/*为全局所有input组件添加边框发光效果*/
input[type=text]:focus,input[type=password]:focus,textarea:focus{
	outline:none;
	border-color:rgba(241,39,62,.75);
	-webkit-box-shadow:0 0 8px rgba(241,39,52,.5);
	-moz-box-shadow:0 0 8px rgba(241,39,52,.5);
	-o-box-shadow:0 0 8px rgba(241,39,52,.5);
	box-shadow:0 0 8px rgba(241,39,52,.5);
	-webkit-transition:border linear .2s, -webkit-box-shadow linear .5s;
	-moz-transition:border linear .2s, -moz-box-shadow linear .5s;
	-o-transition: border linear .2s, -o-box-shadow linear .5s;
	transition:border linear .2s, box-shadow linear .5s;
}

html代码部分：

<pre name="code" class="html"><p><input type="text" value="点击文本框会发光"></p>
    <p><input type="password" name="" id="" value="密码框"></p>
    <p><textarea name="" id="" cols="30" rows="10"></textarea></p>

效果预览图部分：

<img src="https://img-blog.youkuaiyun.com/20140531094930062?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTE3NTQxMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="https://img-blog.youkuaiyun.com/20140531094938812?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTE3NTQxMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="https://img-blog.youkuaiyun.com/20140531094952656?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTE3NTQxMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />