No announcement yet.

HOW TO: Expandable searchfield (CSS3 version)

  • Filter
  • Time
  • Show
Clear All
new posts

  • HOW TO: Expandable searchfield (CSS3 version)

    Dynamik Tutorial

    Hi all!

    Like me you might already have seen those expandable searchfields (like in Twenty-Thirteen) and like me you might have thought "Wannahave!" ... Looks cool and might save some space.

    I stumbled over this Pen on Codepen (go there for a demo, too):
    So I went and adapted it for Dynamik, as the CSS is a little bit different.

    This is tested for the following location: Genesis Theme Settings - Primary Navigation Extras - Display the following: Search form.
    But I´m positive it will work for other locations, too.

    - Works well for default styles of primary nav. Be sure to adjust the CSS to fit your layout.
    - The CSS will "transform" any searchform throughout the whole site. If you want this for only a certain searchform location, you should use more specific CSS for this location.

    - Doesn´t work for browsers that can´t handle CSS3 of course.
    - If you are already using an icon font, you could edit the CSS and replace the icon image of course

    Here it comes - upload your icon to Dynamik Design - Images and put this into Dynamik Custom - CSS and save:

    .search-form input[type="search"], .search-form input[type="text"] {
        background-color: transparent; /*or choose a color fitting your layout and adjust the padding*/
        background-image: url(images/search-icon-white.png);
        background-position: 5px center;
        background-repeat: no-repeat;
        background-size: 24px 24px;
        border: none;
        cursor: pointer;
        height: 37px;
        margin: 3px 0;
        padding: 0 0 0 34px;
        position: relative;
        -webkit-transition: width 400ms ease, background 400ms ease;
        transition:         width 400ms ease, background 400ms ease;
        width: 0;
    .search-form input[type="search"]:focus, .search-form input[type="text"]:focus {
        background-image: url(images/search-icon-grey.png);
        background-color: #fff;
        border: 2px solid black;
        cursor: text;
        outline: 0;
        width: 230px;
    .search-form input[type="submit"] {
      display: none;
    .search-form input[type="search"] {
      -webkit-appearance: textfield;
     box-sizing: content-box;
    /*Want to style nav-primary searchfield ONLY, not others? Use like this for all rules accordingly:*/
    /*.nav-primary .search-form input[type="search"], .nav-primary .search-form input[type="text"] {....}*/
    I made a very simple search icon that fits for this sample - the zip file includes the PSD (CS6) and black, grey and white PNG versions of the icon. Feel free to use however you like.
    Attached Files
    Last edited by SiGa; 08-31-2014, 10:19 AM.