SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot robcub's Avatar
    Join Date
    May 2008
    Location
    London, England
    Posts
    135
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Styling search forms in HTML5

    Hey, getting to grips with HTML5 here.

    I don't understand why I can't style up a form.

    HTML

    HTML Code:
    <form method="get" class="search-form" action="http://website.com/" role="search">
    <input type="search" name="s" placeholder="Search this website&#x02026;" />
    <input type="submit" value="Search" />
    </form>
    The following CSS mostly doesn't work.

    Code:
    input{
    	background-color: #fff;
    	border: 1px solid #ddd;
    	border-radius: 3px;
    	box-shadow: 0 0 5px #ddd inset;
    	padding: 16px;
    	padding: 1rem;
    	width: 100%;
    }
    According to Developer Tools the above CSS should be working but apparently it is not. There is no padding, border, border-radius, etc., on the search form.

    I've tried to use more specific selectors but nothing seems to change the input from being the default one. (although it is stretching to be 100%)

    Sorry I can't show you the site it's in development.

    Would appreciate anyone's help

  2. #2
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You are not styling the input elements correctly. See below:

    input[type="submit"] { declarations }
    ...applies to input buttons of type "submit".

    Change yours to:

    input[type="search"]{
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-shadow: 0 0 5px #ddd inset;
    padding: 16px;
    padding: 1rem;
    width: 100%;
    }

    input[type="submit"]{
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-shadow: 0 0 5px #ddd inset;
    padding: 16px;
    padding: 1rem;
    width: 100%;
    }

    more: http://css-tricks.com/styling-texty-inputs-only/
    Steve Husting

  3. #3
    SitePoint Zealot robcub's Avatar
    Join Date
    May 2008
    Location
    London, England
    Posts
    135
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Stephen. Actually the input[type="submit"] was elsewhere in the CSS.

    It was because I was viewing on webkit browsers on a Mac.

    For some reason, with HTML5 they will style the element to appear like native Mac controls – "-webkit-appearance: none;" rule prevents the default styling.

    So this worked:

    input [type="search"] {
    background-color: #FFF;
    border: 1px solid #DDD;
    border-radius: 3px;
    box-shadow: 0 0 5px #DDD inset;
    padding: 16px;
    padding: 1rem;
    -webkit-appearance: none; /* remove webkit appearance */
    width: 100%;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •