Made the style setting be applied by Python, not by JS. Made background of readonly elements light gray.

common/lib/xmodule/xmodule/gst_module.py

@@ -96,7 +96,7 @@ class GraphicalSliderToolModule(XModule):
         #substitute sliders
         slider_div = '<div class="{element_class}_slider" \
                                    id="{element_id}_slider_{var}" \
-                                   data-var="{var}" data-el_style="{style}">\
+                                   data-var="{var}" style="{style}">\
                      </div>'
         for var in variables:
             # find $slider var='var' ... $
@@ -127,7 +127,7 @@ class GraphicalSliderToolModule(XModule):
         # substitute inputs if we have them
         input_el = '<input class="{element_class}_input" \
                                   id="{element_id}_input_{var}" \
-                                   data-var="{var}" data-el_style="{style}" \
+                                   data-var="{var}" style="{style}" \
                                    data-el_readonly="{readonly}"/>'
 
         input_index = 0  # make multiple inputs for same variable have

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js

@@ -47,6 +47,7 @@ define('Inputs', ['logme'], function (logme) {
                 // In the case of a readonly config option, configure the text
                 // inputit as read-only, and NOT bind an event to it.
                 inputDiv.attr('readonly', 'readonly');
+                inputDiv.css('background-color', '#D3D3D3');
 
             } else { // readonly !== true
 
@@ -63,14 +64,14 @@ define('Inputs', ['logme'], function (logme) {
             // Lets style the input element nicely. We will use the button()
             // widget for this since there is no native widget for the text
             // input.
-            inputDiv.button().css({
-                'font': 'inherit',
-                'color': 'inherit',
-                'text-align': 'left',
-                'outline': 'none',
-                'cursor': 'text',
-                'height': '15px'
-            });
+            // inputDiv.button().css({
+            //     'font': 'inherit',
+            //     'color': 'inherit',
+            //     'text-align': 'left',
+            //     'outline': 'none',
+            //     'cursor': 'text',
+            //     'height': '15px'
+            // });
 
             // Tell the parameter object from state that we are attaching a
             // text input to it. Next time the parameter will be updated with