CSS для отключенной кнопки asp.net

Question

У меня есть кнопка asp.net, которая отключена на основе некоторых условий кода C#. Кнопка, назовет его btnPrevious устанавливается использовать следующий класс CSS:

.btnBlue{ 
background: rgb(40, 108, 244); /* Old browsers */ 
background:linear-gradient(to bottom, rgb(40, 108, 244) 0%, rgb(0, 68, 204) 50%, rgb(40, 108, 244) 100%) repeat scroll 0% 0% transparent; /* W3C */ 
background: -moz-linear-gradient(top, rgb(40, 108, 244) 0%, rgb(0, 68, 204) 50%, rgb(40, 108, 244) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(40, 108, 244)), color-stop(50%,rgb(0, 68, 204)), color-stop(100%,rgb(40, 108, 244))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgb(40, 108, 244) 0%,rgb(0, 68, 204) 50%,rgb(40, 108, 244) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgb(40, 108, 244) 0%,rgb(0, 68, 204) 50%,rgb(40, 108, 244) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgb(40, 108, 244) 0%,rgb(0, 68, 204) 50%,rgb(40, 108, 244) 100%); /* IE10+ */ 
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=rgb(40, 108, 244), endColorstr=rgb(40, 108, 244),GradientType=0); /* IE6-9 */} 

Когда кнопка находится в отключенном состоянии, т.е. btnPrevious.disabled = TRUE; свойство css не работает. Где я иду не так. Благодарю.

EDIT: Просто делая этот вопрос немного больше на тему:

Почему или как мой CSS перезаписаны рамках по умолчанию?

Answer 1

Звучит как случай Specificity. Серверные правила могут применяться к одному и тому же элементу. Ваше правило не очень специфично и будет применяться ранним (и, следовательно, легко перезаписывается).

Откройте веб-страницу в удобном браузере (я использую Chrome), а затем откройте вкладку разработки (F12). Inspect кнопка и просмотреть вкладку Styles. Вы должны уметь видеть, откуда приходит нежелательный стиль (он покажет вам файл и селектор/правило для применения нежелательного стиля).

Если вы не хотите (или можете) отследить (и удалить) стиль, ответственный за испорчение состояния отключения, вы можете попробовать и сделать свое правило более важным. Проверьте ссылку на специфичность, но намек был бы либо попытаться сделать ваше правило более специфичным путем ориентации на кнопке (а не только класс) и, возможно, контейнер, как это:

#container button.btnBlue { 
    ... 
} 

Вы можете также выбрать с помощью повстанческой флаг !important положить ваши правила впереди других правил, которые также не используя !important флаг вроде этого:

#container button.btnBlue { 
    background: rgb(40, 108, 244) !important; 
    ... 
} 

в общем - как описано в ссылке - вы должны стараться не использовать !important, так как это своего рода ломает красота CSS. Если кнопка asp.net также использует !important (или атрибут встроенного стиля), должно быть очень просто сделать более конкретное правило, чем правило asp.net, так как только вы знаете, где находятся ваши кнопки в документе. Вы всегда сможете сделать свое правило немного более конкретным, чем правило asp.net.

Я не знаю, как это применяется нежелательный стиль - я просто надеюсь, что это не встроенный (style атрибут) с !important флагом;)

Answer 2

Вы можете использовать :disabled, чтобы кнопка работала. Попробуйте ниже css

.btnBlue:disabled{ 
background: rgb(40, 108, 244); /* Old browsers */ 
background:linear-gradient(to bottom, rgb(40, 108, 244) 0%, rgb(0, 68, 204) 50%, rgb(40, 108, 244) 100%) repeat scroll 0% 0% transparent; /* W3C */ 
background: -moz-linear-gradient(top, rgb(40, 108, 244) 0%, rgb(0, 68, 204) 50%, rgb(40, 108, 244) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(40, 108, 244)), color-stop(50%,rgb(0, 68, 204)), color-stop(100%,rgb(40, 108, 244))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgb(40, 108, 244) 0%,rgb(0, 68, 204) 50%,rgb(40, 108, 244) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgb(40, 108, 244) 0%,rgb(0, 68, 204) 50%,rgb(40, 108, 244) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgb(40, 108, 244) 0%,rgb(0, 68, 204) 50%,rgb(40, 108, 244) 100%); /* IE10+ */ 
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=rgb(40, 108, 244), endColorstr=rgb(40, 108, 244),GradientType=0); /* IE6-9 */}