JSFiddle - React, Tailwind, and code Playground

by ibasoglu

HTML

<form method="post" id="form1">
    <input readonly type="text">
    <input type="text">
    <select>
        <option value="1">Bir</option>
        <option value="2">İki</option>
        <option value="3">Üç</option>
    </select>
    <input type="checkbox">
    <input type="radio" name="cinsiyet">
    <input type="radio" name="cinsiyet">
    <input disabled type="submit" id="submit1">
    <input type="submit" id="submit2">
    <input type="reset">
</form>

CSS

form#form1 > * {
    display: block;
}

option :checked{
    color: red;
    background: yellow;
}

input[type="checkbox"]:checked{
    margin-left: 20px;
}

input[type="radio"] :checked{
    margin-left: 20px;
}

form#form1 > *:enabled{
    background: red;
}

form#form1 > *:disabled{
    background: lime;
}

form#form1 > *:focus{
    width: 50px;
}

form#form1 > *:read-only{
    background: yellow;
}

form#form1 > *:read-write{
    background: orange;
}