locked
CSS for text color in disabled dropdown/select list RRS feed

  • Question

  • User-234337283 posted

    The text color is a light gray however I'd like it to be black. But when applying $(#DDList1).attr('disabled',true) via javascript, the dropdown list is disabled but the text of the selected option turns gray. I thought it was this in bootstrap.css but no effect:

    .form-control[disabled],

    fieldset[disabled] .form-control {

    color: #000;

    opacity: 1;

    }

    Anyone know where the css is for the color of disabled select list items?

    Thanks!

    Friday, October 23, 2015 2:32 PM

All replies

  • User1578460427 posted

    HTML

    <select disabled="true">
        <option val="">Select Option</option>
        <option val="1">Option 1</option>
        <option val="2">Option 2</option>
        <option val="3">Option 3</option>
        <option val="4">Option 4</option>
    </select>

    CSS

    select:disabled {
        color: #000;
    }

    DEMO

    https://jsfiddle.net/u5w8bceg/

    Friday, October 23, 2015 3:42 PM
  • User2103319870 posted

    askmarkus1

    The text color is a light gray however I'd like it to be black. But when applying $(#DDList1).attr('disabled',true) via javascript, the dropdown list is disabled but the text of the selected option turns gray

    You can try with the below css style

    <style>
                /*css style for IE*/
                select[disabled='disabled']::-ms-value {
                    color: #000;
                }
                /*Specific to chrome and firefox*/
                select[disabled='disabled'] {
                    color: #000;
                }
            </style>

    Tested above style on Chrome, Firefox and IE 11. 

    Friday, October 23, 2015 4:12 PM
  • User-234337283 posted

    Thanks a2h, but the pseudo-class apparently isn't recognized in VS2013. Not sure what's up with that. Eg, a blue squiggle forms under ::ms-value. Anyway, it appears to be working in Chrome, just not IE. In Chrome the .form-control {color: #000} is not changed to gray as it is in IE. In IE, even in the developer tool to 'inspect element' the disabled element says the font is to be black yet the UI shows differently. Very strange but still not sure what to do.

    The same experience was found here:

    http://stackoverflow.com/questions/3117093/how-can-i-change-the-font-color-of-a-disabled-select-element-works-in-firefox

    Saturday, October 24, 2015 2:16 PM
  • User1724605321 posted

    Hi askmarkus ,

    May i know what is the IE version you are using . I test the code which other members provided , and both worked in IE 10 and above .

    Best Regards,

    Nan Yu

    Monday, October 26, 2015 1:17 AM
  • User71929859 posted

    In IE, even in the developer tool to 'inspect element' the disabled element says the font is to be black yet the UI shows differently.

    In IE 9 and below, you can't change the color of disabled elements. You can use the styles given above for the IE10+ and other browsers but keep in mind that changing the styles of the disabled elements is not a good idea anyway and there is a possibility that some browser might not actually pick those styles. For a better UX, I would keep the standard colors for the disabled elements.

    Tuesday, October 27, 2015 7:33 PM
  • User-234337283 posted

    IE 11. Values in disabled 'editorfor' elements are black text, while value in disabled dropdownlists are gray. If I removed the javascript to disable the dropdown list, ie leave it enabled, the text of values is black. In Chrome the values in any element disabled are black, according to the css. I'm stumped.

    Thursday, October 29, 2015 11:20 AM
  • User-234337283 posted

    I'm building this site for some older people and it's not my choice anyway, but they feel the gray for disabled element values makes the values hard to read. Might you have an idea how to disable the html helpers some other way, or change the text color some other way? I'm at a loss.

    Thursday, October 29, 2015 11:26 AM
  • User-693045842 posted

    Hi ,

    In Chrome the values in any element disabled are black, according to the css.

    It depends on the default behavior of different browser . You could use other ways to clear the disabled item .such as provide an area to show them or alert them .

    lemo

    Thursday, October 29, 2015 11:05 PM
  • User-234337283 posted

    More info and restated:

    IE 11.0.15 vs Chrome 46.0.2490.86.

    Here is the jquery:

    $("input, select, textarea").prop("disabled", "disabled");
    $('.dis').css('color', 'black');
    

    Here is the markup:

    <td width="25%">
        <div>
          @Html.DropDownList("ContractorID", null, htmlAttributes: new { @class = "dis form-control", @tabindex = "2" })
        </div>
    </td>

    In Chrome the value displayed in the dropdown (the selected value) is black like all other fields. In IE it remains gray and different from all other fields which are black.

    What's happening? How can I get IE to behave like Chrome and obey the style commands in all the fields for a consistent and readable appearance? Client says the disabled light gray is hard to read.

    Thanks!

    Monday, November 16, 2015 12:54 PM
  • User-234337283 posted

    More info with screenshots. Using red for illustrative purposes.

    Text and Dropdown Fields Different in IE11

    https://onedrive.live.com/redir?resid=177D2E5AC69FACCC!13970&authkey=!ANyZPBeZRnlkdI4&v=3&ithint=photo%2cPNG

    See how the dropdown list text is gray and not black or red? 

    <style>
        /*css style for IE*/
        select[disabled='disabled']::-ms-value {
            color: #000;
        }
        /*Specific to chrome and firefox*/
        select[disabled='disabled'] {
            color: #000;
        }
    </style>

    and this in the bootstrap.min.css:

    .form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{background-color:#FFF;opacity:1;color:red}.form-control[disabled],fieldset[disabled]{cursor:not-allowed;color:red} 

    FYI, the red IS applied - the text can be seen as red as the page begins to render. But before completing, I presume just after applying 'disable' to all the elements, the text in only the dropdown lists turns gray.

    Any ideas or help would be appreciated.

    Sunday, November 22, 2015 5:07 PM