JSFiddle - React, Tailwind, and code Playground

by codef0rmer

HTML

<input type='text' placeholder="I'm enabled" /><br/><br/>
<input type='text' placeholder="I'm disabled" disabled="disabled"/><br/><br/>
<input type='checkbox' checked="checked"/><span>I'm checked</span><br/><br/>
<input type='text' required placeholder="required"/>

CSS

input { width: 200px; height: 20px;}

input[type=text]:enabled { border: 2px solid green;}
input[type=text]:disabled { border: 2px solid red;}
input[type=checkbox]:checked + span { border: 2px solid yellow;}
input[type=text]:required { border: 2px solid pink;}

JavaScript

/* 
 * HTML5 Session Psuedo Selectors Demo
 */

$(function () {
    $('#required').click(function () {$('input[required]').css('border', '2px solid red');});
    $('#pipefoo').click(function () {$('input[name|=foo]').css('border', '2px solid blue');});
    $('#starfoo').click(function () {$('input[name^=foo]').css('border', '2px solid black');});
    $('#endbar').click(function () {$('input[name$=bar]').css('border', '2px solid pink');});
    $('#aliceword').click(function () {$('input[value~=alice]').css('border', '2px solid orange');});
    $('#aliceanywhere').click(function () {$('input[value*=alice]').css('border', '2px solid green');});
});