Remove magnifying glass from search in Webkit

Asked

Viewed 138 times

2

how to remove this blue magnifying glass that appears in OPERA and Chrome browsers ?

Exemplo

I’ve tried to -webkit-appearance: none but nothing happens.

.search input[type="search"] {
width: 170px; 
height: 27px; 
background: #fff url('images/search.png') no-repeat left; 
border: 2px #5473b9; 
border-radius:  5px; 
color: #000; 
padding-left: 20px;  
-webkit-appearance: none;
}
html5 css3

  • try this here, http://jsfiddle.net/dieegov/M8Azh/

  • VLW, it worked out!

1 answer

1


Reset to the input[type=search]

CSS

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

input[type=search] {
  -webkit-appearance:textfield;
  -webkit-box-sizing:content-box;
}

You can see the result in this DEMO

Source: Link

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.