JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div>
    <label for="s">
        <i class="fa fa-search"></i>
        <input name="s" placeholder="search">
    </label>

    
        <pre>If(<strong>input:focus</strong>){ label border is yellow }</pre>
 </div>

CSS

label { 
      border: 3px solid red; /* THIS SHOULD CHANGE */
}

input:focus ~ label {
       border-color: yellow; /* WHEN "input:blur" <label>border-color should be yellow */
}




/* not useful */
label, input { background: #333; outline: 0; font-size: 1em; }
label { width: 90%; border-radius: 5px; padding:  0.3em 0.55em; color: #FFF; }
input { font-weight:  100; border: 0; padding: 0; outline: 0; font-size: 1em; color: #FFF; width: 140px; }
div { text-align: center; margin-top: 30px }
pre { color: #999; margin-top: 20px }

JavaScript

/*


About the <label> with the input inside,
W3 says its okay put "everything" inside label tag.

Info here:
http://stackoverflow.com/a/774065/2225110




- March 11 2014

*/