CODEWITHSUNDEEP
jqueryhtml
user3386779
user3386779

Reputation: 7205

remove cursor on focus textbox

I want to remove cursor form a textbox on focus.When I click the textbox it shows cursor.I want to remove the cursor after I clicked the textbox

jQuery(document).ready(function($) {
 $(function(){
        $('#edit-field-date-value-value-datepicker-popup-0').blur();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="edit-field-date-value-value-datepicker-popup-0" name="field_date_value[value][date]" value="" size="20" maxlength="30" class="form-text hasDatepicker date-popup-init">

Upvotes: 0

Views: 2858

Answers (3)

Tomer Wolberg
Tomer Wolberg

Reputation: 1356

You can use cursor:none on focus. 

#edit-field-date-value-value-datepicker-popup-0:focus{
    cursor:none;
}

Upvotes: 0

Parvez Rahaman
Parvez Rahaman

Reputation: 4397

You could use color: transparent; to make the cursor hidden and outline: none; to get rid of the focused border.

jQuery(document).ready(function($) {
  $(function() {
    $('#edit-field-date-value-value-datepicker-popup-0').blur();
  });
});
#edit-field-date-value-value-datepicker-popup-0:focus {
  color: transparent;
  //and 
  //outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="edit-field-date-value-value-datepicker-popup-0" name="field_date_value[value][date]" value="" size="20" maxlength="30" class="form-text hasDatepicker date-popup-init">

Upvotes: 1

hallleron
hallleron

Reputation: 1992

This can be done purely with CSS:

jQuery(document).ready(function($) {
 $(function(){
        $('#edit-field-date-value-value-datepicker-popup-0').blur();
    });
});
#edit-field-date-value-value-datepicker-popup-0{
  color: transparent;
  text-shadow: 0 0 0 gray;
}
#edit-field-date-value-value-datepicker-popup-0:focus {
    outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="edit-field-date-value-value-datepicker-popup-0" name="field_date_value[value][date]" value="" size="20" maxlength="30" class="form-text hasDatepicker date-popup-init">

Upvotes: 1

Related Questions