Приоритети при сетване на бекграунд


0

Пиша калкулатора, обаче едно нещо ми се инати и ме дразни. Значи, слагам цвят за фон на бутоните, после избирам тези които са disabled с 2-ри клас, така че стават 2 класа и променям цвета на фона на бутоните, които са с клас disabled. Но, ако сложа градиент за фон на бутоните и край, вече каквото и да правя, по какъвто и начин да селектирам, ако ще и по ID, тези, които са disabled, не се прилага стила, ами си седят с градиент. Ето пример с бутон от единия тип, които нямат клас disabled, и другия тип, които имат и 2-та класа.

<input type="button" class="button-one" value="Mod"> <input type="button" class="button-one disabled" value="A" disabled>


в HTML/CSS от olebg (598 точки)


Отговори



2

Здравей  :)

Аз имах същия казус. При мен се получи като:

1. Приложих желания стил за всички бутони

button { width: 41px; height: 34px; background: #ffffff; background: linear-gradient(-90deg #ffffff, #d6e0ef); background: -webkit-linear-gradient(-90deg #ffffff, #d6e0ef); background: -o-linear-gradient(-90deg #ffffff, #d6e0ef); background: -moz-linear-gradient(-90deg #ffffff, #d6e0ef); border: 1px solid #a1aec1; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; cursor: pointer; color: #283f61; font-size: 14px; }

2. Зададох class="disabled" на тези които няма да са активни и им зададох:

button.disabled { backround-color: #dae4f2; background: none; cursor: not-allowed; }
Успех!


от m.zaharieva (75 точки)


0
Благодаря много, сработи и при мен така :)

от olebg (598 точки)


0

дай css-a,че така малко трудно : ) 

ако е това, което си мисля: 

background: linear-gradient е с по-висок приоритет от background-color: или го покрива, не съм много сигурен, но със сигурност background-color: не изключва background: linear-gradient,

решение, пробвай само с background: и тук цвета, който искаш;

.button-one { background: rgb(30,87,153); background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); } .disabled { background: blue; }


от svrakata (591 точки)


0

Може да изредиш двата класа за да е по-специфично въпреки че ти спомена че си пробвал с id

.button-one  , .disabled {
  background: #8865;
}


от vaskoelenkov (279 точки)


0
Можеш да използваш !important за този стил, който искаш да се визуализира. 

от Slavka74 (436 точки)


0

Ето го css-a. Идеята е следната: бутоните, които са disabled да са един цвят, а пък всички останали, които не са disabled да с градиента. Обаче сложа ли градиент и после на disabled, както и да ги селектирам, по 2 класа, по ID не се прилага стила. Същото е и за :hover ефекта, искам бутоните, които са disabled и ги селектирам с 2-ри клас/ID да нямат hover ефекта, който имат активните бутони.

С 2-та класа изредени не прилага стила.

С ID също не прилага стила.

С last-child не виждам как мога произволно да изброя бутоните, които са disabled и да ги стилизирам отделно от цялата група бутони.

За !important колегата е споменал, че не бива да се използва :D а и пробвах, не прилага стила и с него

Стила се прилага, само ако вместо градиент, сложа солиден цвят.


от olebg (598 точки)


0

Колега , само едно не разбрах, disable  клас ли е или ID  защото един път виждам  #disable{.....   а един ред отдолу има .button-one.disable {  тоест струва ми се че един път искаш да го достъпиш като ID а после като class


.


от vaskoelenkov (279 точки)

0
Ами просто пробвах и 2-та варианта, но и двата не работят.

от olebg (598 точки)



0
Ами за най-лесно , отдели класовете ,  на disable му копирай нещата от button-one  които искаш да важат и готово . Въпреки че би трябвало да стане с изреждане на класовете , като искам да презапиша нещо на bootstrap някой път и по 3 класа ми се налага да изреждам за да го хване 

от vaskoelenkov (279 точки)


0
Колеги нов въпрос... Понеже си бачкам с Chrome и там си го нагласих калкулатора що годе, с помощта на колежката за бутоните, обаче взех, че го отворих във Firefox и греда... незнайно защо, калкулатора е по-широк, от колкото ако го отворя в Chrome където си изглежда нормално. Някакви идеи?

от olebg (598 точки)


0
Пробвай с CSS Reset. ЦЪК или ЦЪК   

от svrakata (591 точки)