style readonly inputs different than disabled inputs

src/Umbraco.Web.UI.Client/src/less/forms.less

@@ -478,16 +478,27 @@ textarea[class*="span"],
 // Disabled and read-only inputs
 input[disabled],
 select[disabled],
-textarea[disabled],
-input[readonly],
-select[readonly],
-textarea[readonly] {
+textarea[disabled] {
   cursor: not-allowed;
   background-color: @inputDisabledBackground;
 }
+
+// Explicitly reset the colors here
+input[type="radio"][readonly],
+input[type="checkbox"][readonly] {
+  background-color: transparent;
+}
+
+// READONLY STATE
+// --------------
+
+// Disabled and read-only inputs
+input[readonly],
+select[readonly],
+textarea[readonly] {
+  border-color: @inputReadonlyBorderColor;
+}
 // Explicitly reset the colors here
-input[type="radio"][disabled],
-input[type="checkbox"][disabled],
 input[type="radio"][readonly],
 input[type="checkbox"][readonly] {
   background-color: transparent;

src/Umbraco.Web.UI.Client/src/less/variables.less

@@ -315,6 +315,7 @@
 @formActionsBackground: @gray-9;
 @inputHeight: (@baseLineHeight + 12px); // base line-height + 8px vertical padding + 2px top/bottom border
 @controlRequiredColor: @red;
+@inputReadonlyBorderColor: @gray-7;
 
 
 // Tabs