Display Pointer On Hover Close Icon In Search Textbox

I am using a input type search in my application. I want to display cursor:pointer when user mouse hover on x icon in search box , i tried to find out css for this but not find any

Solution 1:

Perhaps something like this can work?

input[type="search"]::-webkit-search-decoration:hover,
input[type="search"]::-webkit-search-cancel-button:hover { 
    cursor:pointer; 
}

<inputtype="search">

Solution 2:

Use the ::-webkit-search-cancel-button selector and set a cursor: pointer; on it.

NOTE: This only works for chrome and safari. See MDN for more info.

input[type="search"]::-webkit-search-cancel-button {
  cursor: pointer;
}

<inputtype="search">

Solution 3:

To place X icon in input u can do this trick:

.input-container {
  border: 1px solid #DDD;
}

.x-icon {
  float: right;
}

.x-icon:hover {
  cursor: pointer;
}

<divclass="input-container"><spanclass="x-icon">X</span><inputstyle="border: none;"></div>

You can check this solution there: https://codepen.io/Czeran/pen/jGQRLm

Solution 4:

You can create same functionality with regular text input and one span element as x button if you are not happy with current browser support of search input type.

$('.inputField input').on('input', function() {
  var span = $(this).next('span');
  span.toggle($(this).val().length != 0)
})

$('.inputField').on('click', 'span', function() {
  $(this).prev('input').val('')
  $(this).hide()
})

.inputField {
  position: relative;
  display: inline-block;
}

.inputFieldinput {
  padding-right: 20px;
}

.inputFieldspan {
  transform: translateY(-50%);
  display: none;
  position: absolute;
  right: 5px;
  font-size: 12px;
  cursor: pointer;
  top: 50%;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="inputField"><inputtype="text"><span>X</span></div>