CODEWITHSUNDEEP
csshtml
Ketan Modi
Ketan Modi

Reputation: 1800

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 anything releated to this.

enter image description here

<input type="search">

Upvotes: 6

Views: 5718

Answers (4)

Red
Red

Reputation: 7324

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

NOTE: This does not work in FireFox

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

Upvotes: 2

o01
o01

Reputation: 5450

Perhaps something like this can work?

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

Upvotes: 22

Nenad Vracar
Nenad Vracar

Reputation: 122087

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;
}

.inputField input {
  padding-right: 20px;
}

.inputField span {
  transform: translateY(-50%);
  display: none;
  position: absolute;
  right: 5px;
  font-size: 12px;
  cursor: pointer;
  top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputField">
  <input type="text">
  <span>X</span>
</div>

Upvotes: 0

Czeran
Czeran

Reputation: 319

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;
}
<div class="input-container">
  <span class="x-icon">X</span>
  <input style="border: none;">
</div>

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

Upvotes: 0

Related Questions