Skip to content

Instantly share code, notes, and snippets.

@jpmarchand
Last active February 5, 2016 02:59
Show Gist options
  • Save jpmarchand/0965a23e1ffa6bdc1635 to your computer and use it in GitHub Desktop.
Save jpmarchand/0965a23e1ffa6bdc1635 to your computer and use it in GitHub Desktop.
Make Genesis search form input box text disappear on focus. JavaScript method. Source: https://sridharkatakam.com/make-search-form-input-box-text-go-away-focus-genesis/
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* Firefox 18- */
input:focus::-moz-placeholder { color:transparent; } /* Firefox 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* oldIE ;) */
<?php
add_action('wp_enqueue_scripts', 'prefix_clear_search_form_input_box');
function prefix_clear_search_form_input_box() {
wp_enqueue_script('clear-search-form', get_stylesheet_directory_uri() . '/js/clear-search-form.js', array('jquery'), '1.0.0', true);
}
jQuery(document).ready(function($) {
$('input').focusin(function() {
input = $(this);
input.data('place-holder-text', input.attr('placeholder'))
input.attr('placeholder', '');
});
$('input').focusout(function() {
input = $(this);
input.attr('placeholder', input.data('place-holder-text'));
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment