и | CSS
Далее полигон для испытаний (в течении месяца после написания статьи перестало работать то, что раньше работало в Mozilla Firefox).
Стили, применяемые к
Убрать у стрелку
Псевдоэлементы ( ::before , ::after и др.) у
Стили, применяемые к
Стиль выбранного пункта
option:checked
Стиль hover-пункта, на который наведен курсор мыши
option:hover
Разный стиль у и
select:invalid:not(:focus) < color: gray; >select:invalid:focus < color: transparent; >select:focus option
Изображения в
Тег не поддерживается, так как его нельзя вставить в атрибут
Свойство background-image для
Вместо картинок можно использовать символы emoji или подключить файл со своим шрифтом, подменяющим символы на рисунки
Html select disabled color
Asked by:
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!
All replies
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
/*css style for IE*/ select[disabled='disabled']::-ms-value < color: #000; >/*Specific to chrome and firefox*/ select[disabled='disabled']
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 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
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
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.
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.
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.
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
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');
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!
User-234337283 posted
More info with screenshots. Using red for illustrative purposes. 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?
/*css style for IE*/ select[disabled='disabled']::-ms-value < color: #000; >/*Specific to chrome and firefox*/ select[disabled='disabled']
.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control.form-control[disabled],fieldset[disabled]
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.