Improve the look of read-only fields

Tips submitted by PHPMaker users
Post Reply
Adam
User
Posts: 480

Improve the look of read-only fields

Post by Adam »

I've always thought that PHPM "read-only" fields were too plain, and just didn't look as nice as other form fields.
To get around that issue, I've previously set fields "disabled" rather than "read-only" because the styling was so much better.
However, the changes in v2021 have caused me to rethink that approach and I've now reverted to "read-only" ...with a twist!
Simply add the following CSS to User Styles and regenerate your CSS file - read-only fields will then look just like disabled fields - including correct padding.

div.form-group.row > div.col-sm-9 > div {
display: table; }

input:read-only {
background-color: #E9ECEF;
opacity: 1;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 0.71rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-clip: padding-box;
border: 1px solid #CED4DA;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }

Post Reply