Monday, July 15, 2013

Make your input boxes glow

Once upon a time I heard a UI design guy talk to our client... "Do you want your search box to glow?" The client goes, "ooh I like that."

I didn't have a clue what styles make that happen. Glad that wasn't an interview question.

Testing:

Here is how: "focus" and "box-shadow".

<style type="text/css">
input {
    border:2px solid #dadada;
    border-radius:7px;
    font-size:20px;
    padding:5px; 
}

input:focus { 
    outline:none;
    border-color:#9ecaed;
    box-shadow:0 0 10px #9ecaed;
}
</style>
Testing <input type=text size=10>

No comments: