diff --git a/core/js/Macros.js b/core/js/Macros.js
index 77bb41f..ce2ab3b 100644
--- a/core/js/Macros.js
+++ b/core/js/Macros.js
@@ -354,8 +354,6 @@ config.macros.edit.handler = function(place,macroName,params,wikifier,paramStrin
 		var e,v;
 		if(field != "text" && !rows) {
 			e = createTiddlyElement(null,"input");
-			if(tiddler.isReadOnly())
-				e.setAttribute("readOnly","readOnly");
 			e.setAttribute("edit",field);
 			e.setAttribute("type","text");
 			e.value = store.getValue(tiddler,field) || defVal;
@@ -366,8 +364,6 @@ config.macros.edit.handler = function(place,macroName,params,wikifier,paramStrin
 			var wrapper1 = createTiddlyElement(null,"fieldset",null,"fieldsetFix");
 			var wrapper2 = createTiddlyElement(wrapper1,"div");
 			e = createTiddlyElement(wrapper2,"textarea");
-			if(tiddler.isReadOnly())
-				e.setAttribute("readOnly","readOnly");
 			e.value = v = store.getValue(tiddler,field) || defVal;
 			rows = rows || 10;
 			var lines = v.match(/\n/mg);
@@ -379,6 +375,10 @@ config.macros.edit.handler = function(place,macroName,params,wikifier,paramStrin
 			e.setAttribute("edit",field);
 			place.appendChild(wrapper1);
 		}
+		if(tiddler.isReadOnly()) {
+			e.setAttribute("readOnly","readOnly");
+			addClass(e,"readOnly");
+		}
 		return e;
 	}
 };
diff --git a/core/shadows/StyleSheetColors.tiddler b/core/shadows/StyleSheetColors.tiddler
index bcad1c3..db3e096 100644
--- a/core/shadows/StyleSheetColors.tiddler
+++ b/core/shadows/StyleSheetColors.tiddler
@@ -123,6 +123,7 @@ h2,h3 {border-bottom:1px solid [[ColorPalette::TertiaryLight]];}
 .editor input {border:1px solid [[ColorPalette::PrimaryMid]];}
 .editor textarea {border:1px solid [[ColorPalette::PrimaryMid]]; width:100%;}
 .editorFooter {color:[[ColorPalette::TertiaryMid]];}
+.readOnly {background:[[ColorPalette::TertiaryLight]];}
 
 #backstageArea {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::TertiaryMid]];}
 #backstageArea a {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::Background]]; border:none;}