CSS Styling > Entry Edit mode > Readonly TEXT Elements

[katw]

Read-only Text fields are not visually styled to show they are ‘Disabled/non-editable’ when in Admin > Entry Edit mode.

The normal and :focus state is the same as editable fields; which suggests functionality these fields don’t have (ie can’t be edited or typed into).

I have adapted your style to create an override you may like to include in your qfb Admin CSSfile for future plugin release.

• Normal state is softer grey background and text colour is lighter too, aka showing as disabled.
• :Focus state is subtle showing the ‘click’ operation was actioned but the field is unchanged.

Feel free to adjust as you see fit.

/* Fix UI issue for readyonly field */
.qfb-settings input[type=text][readonly]{
	background-color:#F8F8F8;
	cursor: not-allowed;
	color: #999999;
}
.qfb-settings input[type=text][readonly]:focus {
    border: 2px solid #ddd;
    -webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,.05);
    background-color:#eee;
    box-shadow: 0 0 6px 0 rgba(0,0,0,.05);
    color: #999999;
    cursor: not-allowed;
}

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[Author]

Posts