input type search hide the icons
Asked Answered
S

1

27

In chrome, when I type in a search field, there appears a cross which clears the field when clicked (one can also use Esc for this).

  <input type="search">

Is there any way to hide this cross?


EDIT:

If you use attribute results="2", it starts showing a magnifying glass too. what kind of sorcery is this? Why does the glass shows up when I use the results attribute?

<input type="search" results="2">
Stonehenge answered 17/9, 2013 at 17:31 Comment(5)
I'm using Google Chrome too, but (at least the fiddle example) doesn't show a cross. Just a box. What Google Chrome version are you using? (for me: Google Chrome 29.0.1547.66 m)Hakan
You need to start typing to see itJacobine
@Hakan - if you type in the box the X appearsObese
possible duplicate of How do I remove all default Webkit search field styling?Sake
Check out this page, might help :) [css-tricks.com/webkit-html5-search-inputs/]Housecarl
L
67

Sourabh you will need to disable WebKit’s proprietary pseudo elements

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

Let me know if this helps

For your case use:

input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

input[type="search"]::-webkit-search-cancel-button {
  display: none;
}
<input type="search">
Lynelllynelle answered 17/9, 2013 at 17:36 Comment(1)
Why all the unnessecary CSS-references?Erle

© 2022 - 2024 — McMap. All rights reserved.