所说的文本是“准备就绪,通过电子邮件收到通知”的部分。我在我的Wordpress网站上为此页面使用WP维护模式插件https://wordpress.org/plugins/wp-maintenance-mode/。您可以在我的网站http://boasish.com上看到文本框。

<div class="subscribe_wrapper" style="min-height: 100px;">
  <form class="subscribe_form" novalidate="novalidate">
    <input type="text" placeholder="Get notified when it is ready via email" name="email" class="email_input" data-rule-required="true" data-rule-email="true" aria-required="true">
    <input type="submit" value="Submit">
  </form>
</div>


.wrap form.subscribe_form input[type="text"] {
  text-align: center;
  font-family: 'Myriad Pro';
  height:42px
  padding: 11px 10px 10px 0;
  width: 388px;
  padding-top: 16px
}

最佳答案

它属于输入元素的placeholder属性。作为纯CSS解决方案,可以在white获得<input> ed时将占位符文本的颜色更改为:focus

.email_input:focus::-webkit-input-placeholder { /* WebKit browsers */
  color: white;
}
.email_input:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: white;
}
.email_input:focus::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: white;
}
.email_input:focus:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: white;
}

<input type="text" placeholder="Get notified when it is ready via email" name="email" class="email_input" data-rule-required="true" data-rule-email="true" aria-required="true">

关于html - 单击时如何使文本框中的文本消失?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26006497/

10-09 18:07
查看更多