Menu
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?
931
Ordinary input of type file in webpages comes with a default style and the caption, choose file. The good news is that we can style and tweak it to what we want.
A style attribute on an <input> tag assigns a unique style to the input control. Its value is CSS that defines the appearance of the input element.
The <input type="search"> defines a text field for entering a search string. Note: Remember to set a name for the search field, otherwise nothing will be submitted. The most common name for search inputs is q. Tip: Always add the <label> tag for best accessibility practices!
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:
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
