<!-- :read-only -->
<section class="example-cntr read-only">
    <h1>CSS <code>:read-only</code> pseudo-class</h1>
    <p>The <code>:read-only</code> pseudo-class targets an element that cannot be editable by the user. This pseudo-class is very similar to the <code>:disabled</code> pseudo-class, it all depends on which attribute is used in the markup that would tell
        us which pseudo-class to use.</p>
    <p>This is useful for example in situations where we need to show prepopulated information on a form that cannot be altered but that still needs to be displayed in form elements for submission purposes.</p>
    <p>In the following example, this input has the <code>readonly</code> HTML attribute, so it will have gray text, and thus we can target it with the <code>:read-only</code> pseudo-class.</p>
    <label>
        <span>Are you read-only?</span>
        <input type="text" value="Yep! I am read only" readonly>
    </label>
</section>

//:read-only
.read-only {    
    input[type=text] {
        box-sizing: content-box;
        width: 200px;
        padding: 0 5px;
        border: #666 2px solid;
        border-radius: 2px;
        box-shadow: inset 0 -1px 0 #fff, inset -1px 0 0 #fff;
        cursor: text;
        transition: .5s;
    }
    input[type=text]:read-only {
        color: #555;
        text-shadow: 0px -1px 0 #f9f9f9;
        background: #cdcdcd;
    }
    label { display: inline-block; }
    span {
        display: block;
        margin-bottom: 5px;
    }
}



//Styling stuff not needed for demo
body {
    text-align: left;
    line-height: 1.5;
}
h1 {
    font-size: 22px;
    text-transform: none;
    border-bottom: #636363 1px dotted;
    code {
        display: inline-block;
        margin-bottom: 10px;
        color: $y;
        background: none;
        box-shadow: none;
    }
}
code { font-size: 1em; }

input {
    width: 30px; height: 30px;
    vertical-align: middle;
    outline: none;
}
input, label { cursor: pointer; }
input[type=text],
input[type=email] { width: 100%; }

label {
    padding: 3px 8px 5px;
    border-radius: 2px;
    border: transparent 1px solid;    
    transition: .5s;
    &:hover {
        border: rgba(white,.2) 1px solid;        
    }
}
.example-cntr {
    max-width: 800px;
    margin: 0 auto 50px;
    padding: 30px;
    box-shadow: 0 1px 2px rgba(black,.3);
    background: rgba(black,.15);
}