<input type="search"> not styling
Solution 1
Use appearance
property to avoid propietary stylizing and then you are able to style it:
input[type=search]{
-moz-appearance: none;/* older firefox */
-webkit-appearance: none; /* safari, chrome, edge and ie mobile */
appearance: none; /* rest */
}
More info:
Solution 2
Ok so on the end I found a github forum: https://github.com/h5bp/html5-boilerplate/issues/396
Were they written that its a bug in Safari and I should add this piece of code to my styles:
input[type="search"] {
-webkit-appearance: textfield;
}
and it fixed it!
Samuel Kodytek
Updated on July 24, 2022Comments
-
Samuel Kodytek almost 2 years
I am trying to create a simple search bar with a search icon next to it. But I have noticed I can't style a input with the type search. I tried it 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 not valid but found out it was fine to have the type search.
The only thing I was able to style was background-color and it only worked in chrome.
I also tried deleting all my css styles and only styling the input. It did not help.
I tried googling it with no success.
So is their a way around it or will I have to put my input type on text so I can style 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 in Safari and Chrome on OS X
EDIT: I am using OS X so could it be a problem with webkit?
-
Marcos Pérez Gude about 8 yearsYou beat me by 10 seconds! LOL
-
Marcos Pérez Gude about 8 yearsThank you, I appreciate it. My upvote to your answer :)