重力形式选择占位符样式
Posted
技术标签:
【中文标题】重力形式选择占位符样式【英文标题】:Gravity forms Select Placeholder styling 【发布时间】:2016-03-15 17:48:30 【问题描述】:我有一个重力表单选择字段(下拉菜单),我只想在其中设置占位符的样式。我希望有人可以帮助我。
表单生成以下代码:
<select name="input_10" id="input_4_10" class="medium gfield_select" tabindex="11">
<option value="" selected="selected" class="gf_placeholder">Type of Business</option>
<option value="Media">Media</option>
<option value="Retail">Retail</option>
<option value="Travel">Travel</option>
<option value="Other">Other</option>
</select>
我希望 gf_placeholder 具有与实际选项不同的字体颜色和粗细。我已经尝试了几件事,但要么它改变了所有选项,要么没有。我错过了什么?我认为这与dom有关。这是打开下拉列表后立即更改正确项目的 scss:
.ginput_container_select select:first-child
color: $placeholder-color;
@include font-size(16);
font-weight: bold !important;
但是,一旦您关闭下拉菜单,它就会回到未设置样式的版本。
提前致谢!
【问题讨论】:
***.com/questions/8635317/… 希望对您有所帮助.. 嗨!我有同样的问题。最后能解决吗?谢了! 不幸的是,不是只有 css...但是您可以尝试使用 javascript 方法。 我有解决方案:很简单:要更改占位符重力形式的字体颜色,您必须像这样使用 CSS:它是如何工作的? Gravity Form 文档以第一个字段后的部分为目标 ofrm ID:#form_wrapper_8 -->> 8 是您的表单编号。如果你的表单是 2 写:#gform_wrapper_2 现在是 CSS:#gform_wrapper_8 .gform_fields .gfield input::-webkit-input-placeholder color: pink; 【参考方案1】:假设一个人想要将占位符更改为颜色#555555
,并且有以下字段:Name
、Email
、Phone
为此,以下将完成工作
.gfield input::-webkit-input-placeholder
color: #555555;
如果有一段文字,比如
然后需要使用
.gfield textarea::-webkit-input-placeholder
color: #555555;
【讨论】:
【参考方案2】:在所有表单上应用占位符样式
/* Other Fields */
.gform_wrapper .gform_fields .gfield input::-webkit-input-placeholder color: #ffffff;
/* Paragraph Text Area */
.gform_wrapper .gform_body .gform_fields .gfield textarea::-webkit-input-placeholder color: #ffffff;
【讨论】:
以上是关于重力形式选择占位符样式的主要内容,如果未能解决你的问题,请参考以下文章