首页天道酬勤,

,

张世龙 05-06 05:02 10次浏览

虽然在日常开发中经常使用表单,但是如果需要使用提示信息,请首先考虑placeholder属性。 那么我该怎么修改这个属性的样式呢?

placeholder属性提供了描述输入字段期望值的提示信息(hint )。 输入字段为空时显示此提示,如果字段具有焦点,则此提示将消失。

首先,我们知道在CSS中使用伪类来更改placeholder的样式。 如下所示。

input :3360 placeholder { color : pink; }更改的字符样式:

当发现可以在okCSS中更改样式时,可以考虑使用js动态更改placeholder的样式。 您可以预先编写类,然后通过js向此input窗体动态添加类名或删除类名。 我该怎么办呢?

步骤1 :使用交集选择器选择要更改的元素,然后使用伪类更改样式。

# my input.change :3360 placeholder { color : sky blue; (步骤2 )设置元素,并将id添加到input表单中。

请输入input type='text' placeholder='内容' id='myInput '步骤3 :使用js检索元素并将change类添加到元素中。

//jQuery创建的$((#myinput ).on )、function ) ) this ).addclass ) ) change ); ); //原生jsvarmyinput=document.getelementbyid (' my input ); myinput.addeventlistener (,function ) )、this.setattribute )和change ); ); 通过设置以上三个步骤,可以动态设置placeholder属性的样式。 不容易吧?

补充知识点:

交集选择器

1 .相交选择器是指在两个标签的相交部分(即相交部分)修改格式。

2 .交叉选择器可以与id和类一起使用。

格式:

标签1 .标签2

{

属性;

}

设置样式时,没有将change类添加到input元素中,因为必须同时具有两个选定的标记,所以没有从一开始就选择此选择器。

修改样式后,该如何修改placeholder中的字符? 因为这是input表单的属性,所以可以使用本机js的setAttribute属性或jQuery的prop属性更改文本值。

//jquery$('#myinput ' ).on )、function ) ) this ).addclass ) (.change ).prop ) ) placeholder '//jsvarary myinput.addeventlistener (,function ) )、this.setattribute )和change ); this.setattribute('placeholder ',' 123123 ' ) }; 现在,您可以动态更改placeholder的样式以满足开发需要。 学废了吗?

单属性css,设置placeholder的字体颜色