HTML Form Elements w/ CSS

by dfederighi

HTML

<body bgcolor="#222">
<div style="padding:5px">

<form>
    <input type="checkbox" name="cb" id="cb" /><br /><br />
    <textarea name="tx" id="tx" placeholder="something to write here ..."></textarea><br /><br />
    
    <span class="fj-select">
    <select name="sl">
        <option value="one">select one</option>
        <option value="two">select two</option>
        <option value="three">select three</option>
    </select>
    </span>
    <br /><br />
    <div id="switch" class="switch">
        <span class="knob"></span>
        <span class="left-on">YES</span>
        <span class="right-off">NO</span>
    </div>
</form>

</div>    
    </body>

CSS

/* for switch, toggle display for left-on and right-off and control knob with margin-left */

body {
 font-family: helvetica;   
}

input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    border: 2px solid #666;
    border-radius: 5px;
    background-color: #333;
    display: inline-block;
    position: relative;
    padding: 9px;
}

input[type="checkbox"]:checked:after {
    content: '\2714';
    font-size: 14px;
    color: #999;
    position: absolute;
    top: 0px;
    left: 3px;
}


.fj-select {
    background-color: #333;
    color: #999;
    border: 2px solid #666;
    border-radius: 5px;
    padding: 4px;
    display: inline-block;
    position: relative;
}

select {
 -webkit-appearance: none;
 background: transparent;
border: 0;
 color: #999;
padding: 0 20px 0 5px;
 position: relative;
font-size: 11px;
font-weight: bold;  
line-height: 16px;    
}

.fj-select option {
    padding: 1px 5px 0px 10px;        
}

textarea {
    height: 60px;
    width: 200px;
    background-color: #333;
    border: 2px solid #666;
    border-radius: 5px;
    padding: 5px;
    color: #999;        
}

:-moz-placeholder {
    color: #999;
}
 
::-webkit-input-placeholder {
    color: #999;
}

.switch {
width: 50px;
height: 18px;
 background-color: #333;
    border: 2px solid #666;
    border-radius: 6px;
    position: relative;
    cursor: pointer;
}

.knob {
width: 18px;
height: 18px;
    border-radius: 4px;
 background-color: #111;
margin-left: 32px;    
}

.switch span {
font-size: 10px;
position: absolute;
    font-weight: bold;
    }

.left-on {
display: block;
left: 6px; 
padding-top: 3px;
color: rgba(241, 159, 9, 1);
text-shadow: 0 0 5px rgba(241, 159, 9, .8);    
}

.right-off {
display: none;
right: 10px; 
padding-top: 3px;
color: #999;    
}

JavaScript

YUI().use('node','anim', function(Y) {
    
    Y.one('#switch').on('click', function(e) {
        var knob = this.one('.knob');

    var toStyle = '',
        fromStyle = '';
        
        if (knob.getStyle('marginLeft') == '32px') {
            toStyle = '0px';
            fromStyle = '32px'; 
        } else {
            toStyle = '32px';
            fromStyle = '0px';
        }                
        
        var anim = new Y.Anim({
            node: this.one('.knob'),
            from: { marginLeft: fromStyle },
            to: { marginLeft: toStyle },
            duration: 0.3            
        });
        
        anim.on('start', function(e) {
            if (toStyle == '0px') {
                Y.one('#switch .left-on').setStyle('display', 'none');
            } else {
                Y.one('#switch .right-off').setStyle('display', 'none');
            }                
        });
        
        anim.on('end', function(e) {
            if (toStyle == '0px') {
                Y.one('#switch .right-off').setStyle('display', 'block');
            } else {
                Y.one('#switch .left-on').setStyle('display', 'block');
            }                  
        });
        
        anim.run();
    });
});