Zmiana stylu przycisku input[type=button]

Question

Jak to ogarnąć? Mam styl dla przycisków. Ale jeden konkretny przycisk chcę mieć czerwony zamiast zielonego. Próbowałem to robić klasą, ale nie wyszło. Klasą mogę zmienić parametry, który nie są sformatowane w input[type=button]  (np. szerokość). Jedynie udało mi się to zmienić wsadzając styl bezpośrednio do <input>. Jak to zrobić bez wstawiania stylu w kod?

<style> 
input[type=button]{
  background-color: green; }
.zmiana {
  background-color: red; width: 150px;  }
</style>
<h2>Styling form buttons</h2>
<input type="button" value="Button"><br>
<input class="zmiana" type="button" value="Button"><br>
<input style="background-color: blue;" type="button" value="Button">

 

 

Answer 1

musisz użyć takiego argumentu

input[class=zmiana]{
  background-color: red; }

 

Answer 2

Problem, na jaki się nadziałeś, to specyficzność selektorów. Warto ją zrozumieć, bo pozwoli Ci pisać o wiele łatwiejsze w utrzymaniu style.

Answer 3

Identyfikatorem drania załatw :)

Answer 4

Możesz też przypisać kilka klas do elementu-ów

<h2>Styling form buttons</h2>
<input class="button" type="button" value="Button"><br>
<input class="button red" type="button" value="Button"><br>
<input class="button blue rounded" type="button" value="Button">

.button {
  background-color: green;
  width: 150px;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}
.rounded {
  border-radius: 2em;
}

 

[ Multiple Class / ID and Class Selectors ]

Answer 5

Dla zainteresowanych powiększeniem swojej wiedzy o specyficzności selektorów CSS zapraszam na mój blog: http://wlasocha.pl/blog/specyficznosc-i-precyzja-selektorow-css