给 input 文本框和 textarea 多行文本框添加发光焦点响应特效(css)

给 input 文本框和 textarea 多行文本框添加发光焦点响应特效
css3 transition 属性是一个简写属性,用于设置四个过渡属性

CSS 属性的名称 all
完成过渡效果需要多少秒或毫秒 0.30s
速度效果的速度曲线 :ease-in-out
定义过渡效果何时开始:

css3 box-shadow 属性向框添加一个或多个阴影。

box-shadow: h-shadow v-shadow blur spread color inset;

0 0 5px rgba(81, 203, 238, 1);
outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用:none

input[type=‘text‘],textarea{
        /*给 input 文本框和 textarea 多行文本框添加发光焦点响应特效*/
        -webkit-transition: all 0.30s ease-in-out;
        -moz-transition: all 0.30s ease-in-out;
        -ms-transition: all 0.30s ease-in-out;
        -o-transition: all 0.30s ease-in-out;
        outline: none;
          padding: 3px 0px 3px 3px;
            margin: 5px 1px 3px 0px;
          border: 1px solid #ddd;

        }
    input[type=‘text‘]:focus,textarea:focus{
        box-shadow: 0 0 5px rgba(81, 203, 238, 1);
        padding: 3px 0px 3px 3px;
        margin: 5px 1px 3px 0px;
        border:1px solid rgba(81, 203, 238, 1);
        }
时间: 2024-11-02 23:39:15

给 input 文本框和 textarea 多行文本框添加发光焦点响应特效(css)的相关文章

php 批量添加 多行文本框 textarea

$act=!empty($_GET['act']) ? trim($_GET['act']) : ''; switch($act) { case 'adda': $area['a_value'] = trim($_POST['a_value']); $area['a_type']=3; if(strpos($area['a_value'], "\n") === false) { //echo $area['a_value']; //add($area); //$DB->inser

设置input文本框只读效果

设置input文本框只读效果:在实际应用中可能需要将input文本框设置为只读状态,代码实际非常简单,只要添加一个属性即可.代码如下: <input type="text" value="蚂蚁部落" readonly/> 使用readonly属性即可将文本框设置为只读状态,具体可以参阅<input>标签的readonly属性一章节. 原文地址:http://www.51texiao.cn/HTML5jiaocheng/2015/0521/21

css设置input文本框样式代码实例

css设置input文本框样式代码实例:使用css设置input元素的样式是最为常用的操作之一,当然也是最为基础的操作,可能对于刚刚接触css的朋友还不够熟悉,下面就通过一段简单的代码历史演示一下如何设置文本框的样式,当然这个演示可能并不是特别的美观,这里的目的也只是起到一个演示作用,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="

input文本框圆角效果代码实例

input文本框圆角效果代码实例:本章节分享一段代码实例,它实现了将input文本框设置为圆角的功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</tit

JS动态生成Input文本框 并获取文本框值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <meta http-equiv= "Conte

input文本框输入内容控制

CreateTime--2016年10月24日15:17:17Author:Marydoninput文本框录入内容控制 1.控制录入的最多是保留两位小数的数字 <input type="text" onkeyup="this.value=this.value.match(/\d+(\.\d{0,2})?/)||[''])[0]" /> UpdateTime--2016年12月17日22:02:18 2.控制不能录入中文,这里只能使用onkeyup属性,原

chrome表单自动填充导致input文本框背景变成偏黄色问题解决

chrome表单自动填充导致input文本框背景变成偏黄色问题解决 作者:佚名 字体:[增加 减小] 来源:互联网 时间:08-21 18:43:32我要评论 chrome表单自动填充后,input文本框的背景会变成偏黄色的,想必大家都会碰到这种情况吧,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性造成的,解决方法如下,感兴趣的朋友可以了解下 chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认

&lt;input&gt;文本框的readonly和disabled属性区别

<input>文本框的readonly和disabled属性区别: 本章节简单介绍一下标题中两个属性的主要区别,希望能够给需要的朋友带来帮助. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> &

如何让input文本框和图片对齐

如何让input文本框和图片对齐:在默认情况下,input文本框和图片无法垂直居中,总会有所偏差,下面就介绍一下如何实现此效果.代码如下: <input id="qq" name="qq" style="width:100px;vertical-align:middle" /> <img border="0" style="vertical-align:middle"/> 只要给元素