0

The part that says "Get notified when its ready via email" is the text in question. I am using the WP Maintenance Mode plugin https://wordpress.org/plugins/wp-maintenance-mode/ for this page on my Wordpress site. You can see the text box on my website 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
}
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
k65
  • 25
  • 2
  • 8
  • The answer is here http://stackoverflow.com/questions/13630229/onclick-in-css, otherwise you need js for it. – Cheery Sep 24 '14 at 00:02
  • 1
    The input has a placeholder equal to the value "Get notified...". This is default behavior from the browser and will disappear when you start typing. See http://ux.stackexchange.com/questions/21299/removing-placeholder-text-on-focus – marty Sep 24 '14 at 00:06
  • http://jsfiddle.net/b0umabmt/ – Jared Farrish Sep 24 '14 at 00:10

2 Answers2

1

It belongs to the placeholder attribute of the input element. As a pure CSS solution, you could change the color of the placeholder text to white when the <input> get :focused:

.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">
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
0

Update

A clean css solution as suggested by Hashem Qolami is much better and unintrusive. I honestly didn't thought of such approach but already wrote 90% of my answer. I recommend that you go with it!

The textbox is using a placeholder tag, which gets automatically cleared the moment the user starts writing. I recommend that you leave it this way because it's not an entirely unexpected behavior. Most users are used to either situation where the text would disappear the moment you start writing or the moment you click on the field.

Shortly, it serves as a reminder or pointer what is it to be entered in this field.

The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).

The short hint is displayed in the input field before the user enters a value.

Note: The placeholder attribute works with the following input types: text, search, url, tel, email, and password.

If you still want to clear it the moment you click, you will have to use some sort of javascript. If you can directly edit the plugin in some way, you can add those to the check box:

  • onfocus="this.placeholder = ''"
  • onblur="this.placeholder = 'Get notified when its ready via email"

If you cannot edit the plugin, you will have to do insert some javascript on the page, something in the lines of:

//Clear placeholder on focus;
$('.subscribe_form .email_input').focus(function()
{
   $(this).attr('placeholder', '');
});

//Restore the placeholder on blur (loss of focus)
$('.subscribe_form .email_input').blur(function()
{
   $(this).attr('placeholder', 'Get notified when its ready via email');
});
Community
  • 1
  • 1