精华内容
下载资源
问答
  • CSS3表单文本框输入文字提示上浮特效,一款基于placeholder属性制作表单输入框交互式特效。
  • 文本框中placeholder属性值的功能:placeholder属性值用于文本框提示信息,那么我们如何让这个提示信息更加美观呢?下文将讲述使用css美化placeholder的方法分享,如下所示:实现思路:1.设置placeholder居中和颜色...

    摘要:

    下文讲述使用css脚本将placeholder中的文字居中显示的方法分享,如下所示;

    文本框中placeholder属性值的功能:

    placeholder属性值用于文本框的提示信息,

    那么我们如何让这个提示信息更加美观呢?

    下文将讲述使用css美化placeholder的方法分享,如下所示:

    实现思路:

    1.设置placeholder居中和颜色

    input::-ms-input-placeholder{

    text-align: center;

    color:red;

    font-weight:bold;

    }

    input::-webkit-input-placeholder{

    text-align: center;

    font-weight:bold;

    }

    例:

    美化placeholder的示例分享

    maomao365.com

    css之美化placeholder的示例分享


    input::-ms-input-placeholder{

    color: red;text-align: center;

    }

    input::-webkit-input-placeholder{

    color: red;text-align: center;

    }

    placeholder="这是一个提示信息1"

    />

    41c217e97c17c7fd531e7f1132139022.png

    css美化placeholder示例分享

    展开全文
  • html文本框提示文字设置

    万次阅读 2015-03-08 22:52:24
    设置html文本框提示文字 两种方式 1,设置placeholder属性           2.使用onfocus方式和onblur方法    

    设置html文本框提示文字 两种方式

    1,设置placeholder属性

    <!doctype html>

    <html>

              <body>

                              <input type="text" name="use" placeholder="请输入内容" />

                              <input type="submit" />

               </body>

    </html>

       

    2.使用onfocus方式和onblur方法

    <!doctype html>

    <html>

              <body>

                              <input type="text" name="use" value="请输入内容" οnfοcus="javascript:if(this.value=='请输入内容')this.value=' ' οnblur="javascript:if(this.value==' ')this.value=‘请输入内容' " />

                              <input type="submit" />

               </body>

    </html>

    
    展开全文
  • 曾实现了一些页面例子让大家参考,但这些例子里的背景文字都是灰色的,样式很单一,其实它们可以做的更好看,CSS3里提供了专门的规则属性来美化用placeholder实现的input输入框的背景提示信息。下面我们来看看如何用...

    之前在介绍HTML5的placeholder属性时,曾实现了一些页面例子让大家参考,但这些例子里的背景文字都是灰色的,样式很单一,其实它们可以做的更好看,CSS3里提供了专门的规则属性来美化用placeholder实现的input输入框的背景提示信息。下面我们来看看如何用专用的CSS属性来美化具有placeholder属性的Input输入框。

    CSS代码

    在火狐浏览器中的写法和在谷歌浏览器和Safari里的写法有些不同,但相信以后会统一。

    /* 通用 */

    ::-webkit-input-placeholder { color:#f00; }

    ::-moz-placeholder { color:#f00; } /* firefox 19+ */

    :-ms-input-placeholder { color:#f00; } /* ie */

    input:-moz-placeholder { color:#f00; }

    /* webkit专用 */

    #field2::-webkit-input-placeholder { color:#00f; }

    #field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }

    #field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

    /* mozilla专用 */

    #field2::-moz-placeholder { color:#00f; }

    #field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }

    #field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

    其实只是一句代码,但为了实现范围最广的浏览器支持,加上了各自的浏览器引擎前缀(Vendor Prefix),一下子变成了10几行代码,希望这种情况会尽快的过去。

    一些基本的CSS样式你都可以使用在placeholder上——颜色,字体,字体样式等。你可以还可以创造更复杂的样式,比如用GIF动画。

    实例演示

    下面都是input输入框,用了四种美化效果,我使用了autofocus将光标放在了第一个输入框里,但可以在其它输入框里也输入信息,看看效果:

    对于input输入框的背景提示信息(placeholder)的美化虽然只是对网站应用的小小点缀,但正是这样细节上的小差别将你的网站和别人的网站区别开来。IE10也支持了placeholder属性,所以,这是一个可以大范围只是的CSS技巧。

    展开全文
  • 特效描述:html5input placeholder 文本占位符动画插件 文本框文字提示输入。Placeholdem是文本域占位符符号标识的一个JavaScript插件。占位符的值将逐步删除焦点文字,并在焦点离开逐步恢复。代码结构1. 引入CSS2. ...

    特效描述:html5input placeholder 文本占位符动画插件 文本框文字提示输入。Placeholdem是文本域占位符符号标识的一个JavaScript插件。占位符的值将逐步删除焦点文字,并在焦点离开逐步恢复。

    代码结构

    1. 引入CSS

    2. 引入JS

    3. HTML代码

    input,textarea {

    border:2px solid #ddd;

    border-radius:0;

    color:#999;

    display:block;

    font:400 1em/1 "Open Sans",sans-serif;

    margin:0 0 .5em;

    padding:1em 1.25em;

    width:100%;

    -webkit-transition:border-color 300ms,color 300ms;

    transition:border-color 300ms,color 300ms;

    -webkit-appearance:none

    }

    input:focus,textarea:focus {

    border-color:#333;

    color:#333;

    outline:0

    }

    textarea {

    margin:0;

    min-height:7.5em;

    line-height:1.5;

    overflow:auto;

    resize:vertical

    }

    .arrow {

    border-top:9px solid #ddd;

    border-right:9px solid #ddd;

    border-bottom:9px inset transparent;

    border-left:9px inset transparent;

    display:block;

    position:absolute;

    right:0;

    top:0;

    -webkit-transition:border-color 300ms;

    transition:border-color 300ms

    }

    input:focus+.arrow,textarea:focus+.arrow {

    border-top-color:#333;

    border-right-color:#333

    }

    <!-- 添加占位符在input或textareas --/>

    <input name="fieldname" placeholder="Placeholder Value" />

    // 运行所有占位符元素

    Placeholdem( document.querySelectorAll( '[placeholder]' ) );

    Placeholdem(document.querySelectorAll('[placeholder]'));

    var fadeElems = document.body.querySelectorAll('.fade'),

    fadeElemsLength = fadeElems.length,

    i = 0,

    interval = 50;

    function incFade(){

    if(i < fadeElemsLength){

    fadeElems[ i ].className += ' fade-load';

    i++;

    setTimeout(incFade, interval);

    }

    }

    setTimeout( incFade, interval );

    展开全文
  • 表单1 : 表单标签属性 :action = '接口地址'method = 'get / post'name = '表单名称'2 : 表单控件属性:...maxlength:控制最多输入的字符数,Size:控制框的宽度(以字符为单位)1)文本框2)密码框3)提交按钮4)重置...
  • 1.设置文本框的禁止输入:设置它的disabled="disabled",或者设置readonly="readonly"2.设置单选按钮选中:checked="checked",在用jquery判断该单选按钮是否被选中,可以获取该单选按钮的checked属性,如:if($("#...
  • 文本框提示文字

    万次阅读 2013-11-14 14:04:38
    现在在jsp做页面展示,为了有更好的用户体验,我们可能需要在某一个文本框中给一个信息提示,类似于“请输入标题”,这个字体往往呈现处灰色的,具体色彩很接近#CCC, 当我们点击这个文本框的时候,这段字就消失了...
  • 今天在学习JavaScript函数部分,根本慕课网的编程练习加入了自己的一些拓展,主要实现了文本框灰色文字提示。 其中的技巧就是使用onfocus和onblur事件。onfocus事件的属性值不仅可以为函数名,还可以为表达式或者...
  • 文本框输入文字提示语消失特效

    千次阅读 2012-11-23 10:53:49
    文本框输入文字提示语消失特效-懒人图库 $(document).ready(function(){ $("#focus .input_txt").each(function(){ var thisVal=$(this).val(); //判断文本框的值是否为空,有值的情况就隐藏提示语,没有值...
  • 通常情况下,文本框输入的文字个数并不是无限制的,一般都会限定一个输入最高上限,较为人性化的网站可能会有可输入字数倒计效果,比如还剩余20可以输入这样的提示,下面就通过一个实例介绍一下如何实现此效果。...
  • 一般我们做文字提醒功能时会在value处直接写上,现在总结一个比较好的方法直接上代码: html: <dl class="login_from"> <dd class="login_input"> <span>微博/博客/邮箱/手机号</span&...
  • HTML/CSS文本框样式美化代码输入框景背景透明:鼠标划过输入框,输入框背景色变色:style="width:106;height:21"onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'"style="border-...
  • 美化input对与前端工程师来说会经常碰到,那么如何通过css3来自定义input光标,placeholder提示文字,颜色等属性呢?其实css3里提供了专门的规则属性来实现input的自定义化,来帮助前端工程师最大程度的还原视觉设计...
  • CSS3文本框动画输入标签效果是一款基于jQuery+CSS3实现的文字标签提示特效。
  • 输入文本框提示文字的清空 //当用户刚进入页面,在文本框中用灰色文字提示用过应该做什么,点用户点击这个文本框的时候,清空提示文字。 $(function () { var isFirst = true; $("#text1").css("color", ...
  • 文本框 css 样式

    2014-07-29 09:58:12
    文本框提示样式,鼠标点击获得焦点时提示内容消失 input文本框样式 只有下划线的文本框: 软件序列号式的输入框: 软件序列号式的输入框(完整版): 输入框景背景透明: 鼠标划过输入框,输入框背景色变色: ...
  • Css制作文本框发光效果

    千次阅读 2013-08-16 09:46:53
    Css制作文本框发光效果 CSS控制文本框发光效果,是各种前端开发库使用最多的效果之一,这里面使用了CSS直接控制其样式,显示效果为:当文本框获取焦点时,文本框四周均匀缓慢发光的国度效果,提升了界面的美观,也...
  • 通常情况下,文本框输入的文字个数并不是无限制的,一般都会限定一个输入最高上限,较为人性化的网站可能会有可输入字数倒计效果,比如还剩余20可以输入这样的提示,下面就通过一个实例介绍一下如何实现此效果。...
  • CSS3文本框动画输入标签效果是一款基于jQuery CSS3实现的文字标签提示特效。
  • -webkit-input-placeholder是webkit的特有css,可以控制输入框的文字样式,配合css的动画效果和伪类,可以很轻松地实现一个带动画的输入框,在系统登录、搜索等位置很适合。当然你要为了兼容IE6,这个方法是行不通。...
  • input-placeholderhtml5为input添加了原生的占位符属性placeholder,高级浏览器都支持这个属性,例如:默认的placeholder字体颜色是呈浅灰色,如果想改变这个默认颜色,解决方案如下:input:-moz-placeholder,...
  • 文本框添加灰色提示文字 [/code] 注:这段代码没有淘宝登陆框的提示效果好,淘宝的效果是在输入字符的时候才把提示字符隐藏掉,而这段代码是当输入框获得焦点的时候就把提示字符隐藏掉,淘宝主要...
  • * 文本框提示文字 * @author zhuhu */ function inpHint(idStr,valStr){ var idArr= new Array(); var valArr= new Array(); idArr=idStr.split(","); valArr=valStr.split(","); for(var i=0;i;i+...
  • 想要在文本框内实现输入提示的功能 最开始想用placeholder去实现,但发现easyui好像不支持placeholder,所以就自己用js去实现,好在也不复杂。 在htm里添加了onclick和onblur方法调用,变成如下: &

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,063
精华内容 5,625
关键字:

css文本框提示文字