0

Is there any possibility to style an <input> tag?
What I wrote: 

<li><form>
    <input class="search" name="s" type="search" placeholder="Search...">
    <input type="submit" value=">
</form></li>

And the styling:

form{
        height: 40px;
}

.search{
        border: none;
        background-color: #7e7376;
}

input[type=search]{
        font-family: 'Overpass';
        font-weight: bold;
        color: #2c2729;
        margin-top: 4px;
        padding: 10px 15px;
        height: 12px;
}

It looks very different on various browsers. I tried to apply some reset CSS but that didn't help. I am building a menu bar and the search box needs to look like part of it. Any help on this?

trnks_
  • 45
  • 1
  • 7
  • "It looks very different on various browsers" — You need to be more specific about the problem. – Quentin Apr 06 '14 at 18:50
  • 1
    [The HTML5 placeholder attribute is not a substitute for the label element](http://www.456bereastreet.com/archive/201204/the_html5_placeholder_attribute_is_not_a_substitute_for_the_label_element/) – Quentin Apr 06 '14 at 18:51
  • What you are looking for is to style input placeholder. You can find more info about that here: http://blog.teamtreehouse.com/the-css3-placeholder-pseudo-element – Dragos Rizescu Apr 06 '14 at 18:55

2 Answers2

0

If you're in a webkit browser you can add -webkit-appearance: none. This will remove default browser styling. You may also want to remove the outline, border, and background.

Josh Rutherford
  • 2,683
  • 1
  • 16
  • 20
0

The appearance property is what you are looking for.

The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme.

input {
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
}

CSS-Tricks has a very useful article about it.

aloisdg
  • 22,270
  • 6
  • 85
  • 105
  • @trnks_ If you want to change the placeholder, you may like [this question](http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) on SO. – aloisdg Apr 06 '14 at 19:58