WP-Mix

A fresh mix of code snippets and tutorials

CSS Selectors and Default Styles for the WordPress Admin Area

Here are the CSS selectors used by WordPress in the Admin Area. Note that things are changing relatively quickly in the WP Admin Area, so chances are there are additional selectors and styles that have been added, and likely some changes made to the current list. So this collection of default CSS selectors and styles is by no means complete, but hopefully will serve as a useful reference and starting point for further exploration.

/*
a
div
span
button
select
option

input number, checkbox, search
*/

.wp-admin select, fieldset label, label { vertical-align: middle; }
.wp-admin select {
    padding: 2px;
    line-height: 28px;
    height: 28px
}

input,textarea { box-sizing: border-box; }
textarea { overflow: auto; }


input[type=text],
input[type=search],
input[type=radio],
input[type=tel],
input[type=time],
input[type=url],
input[type=week],
input[type=password],
input[type=checkbox],
input[type=color],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
select,
textarea {
    border: 1px solid #ddd;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .07);
    background-color: #fff;
    color: #32373c;
    outline: 0;
    transition: 50ms border-color ease-in-out
}
input[type=text]:focus,
input[type=search]:focus,
input[type=radio]:focus,
input[type=tel]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus,
input[type=password]:focus,
input[type=checkbox]:focus,
input[type=color]:focus,
input[type=date]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=email]:focus,
input[type=month]:focus,
input[type=number]:focus,
select:focus,
textarea:focus {
    border-color: #5b9dd9;
    box-shadow: 0 0 2px rgba(30, 140, 190, .8)
}
input[type=url],
input[type=email] {
    direction: ltr
}
input[type=number] {
    height: 28px;
    line-height: 1
}
input[type=radio],
input[type=checkbox] {
    border: 1px solid #b4b9be;
    background: #fff;
    color: #555;
    clear: none;
    cursor: pointer;
    display: inline-block;
    line-height: 0;
    height: 16px;
    margin: -4px 4px 0 0;
    outline: 0;
    padding: 0!important;
    text-align: center;
    vertical-align: middle;
    width: 16px;
    min-width: 16px;
    -webkit-appearance: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    transition: .05s border-color ease-in-out
}
input[type=radio]:checked+label:before {
    color: #82878c
}



.wp-core-ui input[type=reset]:active,
.wp-core-ui input[type=reset]:hover {
    color: #00a0d2
}
.wp-admin p input[type=radio],
.wp-admin p input[type=checkbox],
td>input[type=checkbox] {
    margin-top: 0
}
.wp-admin p label input[type=checkbox] {
    margin-top: -4px
}
.wp-admin p label input[type=radio] {
    margin-top: -2px
}
input[type=radio] {
    border-radius: 50%;
    margin-right: 4px;
    line-height: 10px
}
input[type=radio]:checked:before,
input[type=checkbox]:checked:before {
    float: left;
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    font: 400 21px/1 dashicons;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

input[type=checkbox]:checked:before {
    content: "\f147";
    margin: -3px 0 0 -4px;
    color: #1e8cbe
}
input[type=radio]:checked:before {
    content: "\2022";
    text-indent: -9999px;
    border-radius: 50px;
    font-size: 24px;
    width: 6px;
    height: 6px;
    margin: 4px;
    line-height: 16px;
    background-color: #1e8cbe
}
@-moz-document url-prefix() {
    input[type=radio], input[type=checkbox] {
        margin-bottom: -1px
    }
}
input[type=search] {
    -webkit-appearance: textfield
}
input[type=search]::-webkit-search-decoration {
    display: none
}
.ie8 input[type=password] {
    font-family: sans-serif
}
button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit
}
input,
select,
textarea {
    font-size: 14px;
    border-radius: 0
}
textarea {
    padding: 2px 6px;
    line-height: 1.4;
    resize: vertical
}
.wp-admin input[type=file] {
    padding: 3px 0;
    cursor: pointer
}
label {
    cursor: pointer
}
input,
select {
    margin: 1px;
    padding: 3px 5px
}
input.code {
    padding-top: 6px
}
textarea.code {
    line-height: 1.4;
    padding: 4px 6px 1px
}
input.readonly,
input[readonly],
textarea.readonly,
textarea[readonly] {
    background-color: #eee
}



::-webkit-input-placeholder {
    color: #72777c
}
::-moz-placeholder {
    color: #72777c;
    opacity: 1
}
:-ms-input-placeholder {
    color: #72777c
}



input.disabled,
input:disabled,
select.disabled,
select:disabled,
textarea.disabled,
textarea:disabled {
    background: rgba(255, 255, 255, .5);
    border-color: rgba(222, 222, 222, .75);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04);
    color: rgba(51, 51, 51, .5)
}
input[type=file].disabled,
input[type=file]:disabled,
input[type=range].disabled,
input[type=range]:disabled {
    background: 0 0;
    box-shadow: none;
    cursor: default
}
input[type=radio].disabled,
input[type=radio].disabled:checked:before,
input[type=radio]:disabled,
input[type=radio]:disabled:checked:before,
input[type=checkbox].disabled,
input[type=checkbox].disabled:checked:before,
input[type=checkbox]:disabled,
input[type=checkbox]:disabled:checked:before {
    opacity: .7
}



@media screen and (max-width: 782px) {

    textarea { -webkit-appearance: none; }
    input[type=text],
    input[type=search],
    input[type=password],
    input[type=email],
    input[type=number] {
        -webkit-appearance: none;
        padding: 6px 10px
    }
    input[type=number] {
        height: 40px
    }
    input.code {
        padding-bottom: 5px;
        padding-top: 10px
    }
    input[type=checkbox] {
        -webkit-appearance: none;
        padding: 10px
    }
    input[type=checkbox]:checked:before {
        font: 400 30px/1 dashicons;
        margin: -3px -5px
    }
    input[type=radio],
    input[type=checkbox] {
        height: 25px;
        width: 25px
    }
    .wp-admin p input[type=radio],
    .wp-admin p input[type=checkbox] {
        margin-top: -3px
    }
    input[type=radio]:checked:before {
        vertical-align: middle;
        width: 9px;
        height: 9px;
        margin: 7px;
        line-height: 16px
    }
    #wpbody select {
        height: 36px;
        font-size: 16px
    }
    input, textarea {
        font-size: 16px
    }

}

Learn more

Digging Into WordPressWordPress Themes In DepthWizard’s SQL Recipes for WordPress