CODEWITHSUNDEEP
htmlcssformsinput
Samuel Kodytek
Samuel Kodytek

Reputation: 1024

<input type="search"> not styling

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?

Upvotes: 9

Views: 11624

Answers (2)

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

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:

Upvotes: 13

Samuel Kodytek
Samuel Kodytek

Reputation: 1024

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!

Upvotes: 7

Related Questions