Search Widget CSS style HTML5

Community Forums Forums Design Tips and Tricks Search Widget CSS style HTML5

This topic is: not resolved

This topic contains 9 replies, has 3 voices, and was last updated by  RobCubbon 1 year ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #45836

    RobCubbon
    Participant
    Post count: 103

    Hi, I’ve changed a site to HTML5 and run the CSS through the Dynamik converter

    http://dynamiktheme.com/genesis-xhtml-to-html5-css-converter/

    All well and good but the search widget refuses to play along with the other HTML elements!

    Here is the HTML for the search widget:

    `

    <form method=”get” class=”search-form” action=”http://website.com/” role=”search”><input type=”search” name=”s” placeholder=”Search this website…” /><input type=”submit” value=”Search” /></form>

    `

    And here is the CSS I’m using to style it.

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

    In the old XHTML this created a lovely thick input box with a border and an inner shadow. But in HTML5 the padding, border, border radius and shadow declarations don’t work. Although the width 100% does.

    I’ve tried endlessly with the selector but nothing works. I’ve looked for HTML5 form tutorials and the input selector should work.

    According to Developer Tools the above CSS should be working but apparently it is not.

    I don’t understand.


    • This topic was modified 1 year, 3 months ago by  RobCubbon.
    • This topic was modified 1 year, 3 months ago by  RobCubbon.
    • This topic was modified 1 year, 3 months ago by  RobCubbon.
    • This topic was modified 1 year, 3 months ago by  RobCubbon.
    #45860

    rfmeier
    Participant
    Post count: 597

    Hey Rob,

    Does this happen to be live? I can take a quick look at it.


    #45861

    RobCubbon
    Participant
    Post count: 103

    Ryan, could I send you a message with the WordPress UN and PW as I don’t want a dupe dev site live with links to it?


    #45864

    rfmeier
    Participant
    Post count: 597

    Rob,

    Sure, no problem. You can e-mail me at rfmeier(at)gmail.com


    • This reply was modified 1 year, 3 months ago by  rfmeier.
    • This reply was modified 1 year, 3 months ago by  rfmeier.
    #45872

    rfmeier
    Participant
    Post count: 597
    This reply has been marked as private.
    #45877

    rfmeier
    Participant
    Post count: 597

    Rob,

    I am seeing the box styled in Chrome, Firefox and even IE 9+. The padding, border, and color looked valid.

    However, the box shadow was not appearing for Chrome (webkit). I ran into this issue in the past once and had to dig through some old code.

    Here is how I got it to work;

    [css]
    input, select, textarea, form.search-form input {
    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%;
    }[/css]

    webkit-appearance overrides styling to make the element look like ‘native’ controls. You would think this would be turned off by default. There may be a valid reason it is turned on. Who knows.

    If you aren’t seeing the padding and border styling, try a hard browser cache reset.

    I hope this helps.


    #45891

    RobCubbon
    Participant
    Post count: 103

    Thanks, Ryan, but this must be a Mac issue. I’m seeing the search form as an ugly, default, thin version on my Chrome after repeated refreshes and on a Safari browser that has never viewed the site before. As there is nothing aobut this out there I must be doing something else wrong!!!


    #45921

    RobCubbon
    Participant
    Post count: 103

    Discount my earlier message. The above fix from Ryan worked. :)


    #61563

    genevishgraphics
    Participant
    Post count: 52

    I think I am having a relevant issue myself. I am trying to get RID OF the box-shadow of the Search Box and cannot remove it for Chrome and Safari no matter what I do!
    I have tried -moz-box-shadow: none!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
    On input and search and everything, nothing will get rid of the ugly drop shadow – only Firefox doesnt display the shadow. I am using a Mac, is it mac related or is it mac/browser related or what? Thanks!

    #61663

    RobCubbon
    Participant
    Post count: 103

    Hi, genevishgraphics, are you using the Genesis sample child theme?

    Around about line 200 of the style.css you have something like:

    
    input, select, textarea {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-shadow: 0 0 5px #ddd inset;
    padding: 16px;
    padding: 1rem;
    width: 100%;
    

    Just deleting the box-shadow: 0 0 5px #ddd inset; may be the answer?


Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.