All articles tagged CSS

  • Styling a select box with CSS - revisited

    My earlier blogpost on styling a select box has gotten a lot of traction lately and this is an updated version of that. The previous example actually used an image, although I said it didn’t;-)

    This is the updated HTML, I just added one tiny element, a small price to get rid of an image.

    <div class="styled-select">
        <span class="arrow"></span>
        <select>
            <option>One</option>
            <option>Two</option>
        </select>
    </div>
    

    The new span is styled to an arrow and a separator with the following code (this is not the complete CSS, please visit the jsfiddle for that).

    .arrow {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 0; 
        height: 0; 
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 10px solid #A0A1A4;
    }
    
    .arrow:before {
        content: '';
        position: absolute;
        top: -15px;
        left: -12px;
        height: 19px;
        border-left: 1px solid #27292C;
    }
    

    Take a swing at the new jsfiddle and see if you can come up with a neater solution! =)

  • Styling a select box with CSS

    UPDATE: I made some changes to this solution, take a look!

    Working with a designer that loooves to over design native HTML components is a . You do all these ugly hacks and replace a select box with a ul/li list and do negative margin on the original etc etc. And no matter how much you try you never achieve the same completeness as the native element. But it is possible to style a select box with just CSS3.

    I found this example but it uses an ugly hack to get rid of the native dropdown arrow, it wraps the select box in a container that has a fixed width and overflow:hidden, then it sets the select box to a fixed with that is wider than the container. Sure it must be a better way to get rid of it, and yes there is.

    You can get rid if all the styling of a select box, but since our beloved browsers handle things differently you have to use a bit of tweaking.

    This is the HTML we are gonna be using

    <div class="styled-select">
        <select>
            <option>One</option>
            <option>Two</option>
        </select>
    </div>
    

    Styling for the container, this is where we set the custom arrow, gradient etc, but no width, so it will just wrap the select box nicely.

    .styled-select {
        height: 21px;
        line-height: 21px;
        overflow: hidden;
        border: 1px solid #27292c;
        border-radius: 3px;
        background: url('bg.png') no-repeat right #494849;
        box-shadow:inset 0 0 1px #393939;
        -moz-box-shadow:inset 0 0 1px #393939;
        -webkit-box-shadow:inset 0 01px #393939;
    }
    

    And on the real select box we hide the styling, and set the background to transparent, but for IE we have to apply the hack I linked to earlier, but now with a relative width instead of a fixed one.

    .styled-select select {
        -webkit-appearance: none;
        -moz-appearance: window;
        background: transparent;
        width: 100%;
        wid\th: 112%;   /* IE hack */
        padding: 1px 20px 0 3px;
        border: 0;
    }
    

    There you have it! A select box that is native and resizes just the way it should. If you want to test it, head to the jsfiddle! Comments are more than welcome=)

    UPDATE: I made some changes to this solution, take a look!

Page 1 / 1