not a style I am trying to create a simple search bar with a search icon next to it. But I noticed that I can’t create a ty...">
All geek questions in one place

<input type = "search"> not a style

I am trying to create a simple search bar with a search icon next to it. But I noticed that I can’t create a type input style. I tried this on safari (version 9.0.3 (11601.4.4)) and then on chrome (version 49.0.2623.110). At first I thought it was because the input was invalid, but figured out that it would be nice if you were looking for a type.

The only thing I managed to create was the background color, and it only worked in chrome.

I also tried removing all my CSS styles and just the input style. It did not help.

I tried to use it without success.

So is their path around it or should I put my input type in the text so that I can stylize it?

Thanks in advance!

CODE:

<html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <style> input { padding: 10px; /* Does not work */ } </style> </head> <body> <input type="search" placeholder="Search"> </body> </html>

this code does not work on Safari and Chrome on OS X

EDIT: I am using OS X, so this could be a webkit problem?

+5
source share
2 answers

Use the appearance property to avoid proprietary styling, and then you can style it:

 input[type=search]{ -moz-appearance: none;/* older firefox */ -webkit-appearance: none; /* safari, chrome */ appearance: none; /* rest */ }

Additional Information:

https://developer.mozilla.org/es/docs/Web/CSS/-moz-appearance

+6
source

Ok, so in the end I found the github forum: https://github.com/h5bp/html5-boilerplate/issues/396

Have they been written that this is a bug in Safari, and I should add this piece of code to my styles:

 input[type="search"] { -webkit-appearance: textfield; }

and he fixed it!

+3
source

Source: https://habr.com/ru/post/1246072/

More articles:


All Articles