Заменить коробку-тень

Question

У меня есть 2 .css файла на моей странице в следующем порядке

<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="calib.css">

В main.css у меня есть

input[type="button"]{
  box-shadow: 0 0px 10px blue;
}

и в calib.css I 'мы получили

.btn-active{
  box-shadow: 0 0px 10px red;
}

В HTML я поместил эти элементы

<input type="button" class="btn-active" value="Button 1">
<input type="button" class="" value="Button 2">

Но цвет тени коробки в кнопке 1 остается синим.

Есть лиспособ заменить значение свойства CSS без создания нового класса с содержимым input [type = "button"]?

Спасибо!

Answer 1

> .btn-active{
  box-shadow: 0 0px 10px red !important;
}

или

input.btn-active{
  box-shadow: 0 0px 10px red;
}

Answer 2

Вы должны быть более точными, указав свои селекторы.

Вы можете использовать input.btn-active и сохранить порядок, в котором вы указываете css.

input[type="button"] {
  box-shadow: 0 0 10px blue;
}

input.btn-active {
  box-shadow: 0 0 10px red;
}

<form>
  <input type="button" class="btn-active" value="Button 1">
  <input type="button" class="" value="Button 2">
</form>

Если вы хотите быть более конкретным, используйте input[type="button"].btn-active.Таким образом, указав его так, это также сработает:

input[type="button"].btn-active {
  box-shadow: 0 0 10px red;
}

input[type="button"] {
  box-shadow: 0 0 10px blue;
}

<form>
  <input type="button" class="btn-active" value="Button 1">
  <input type="button" class="" value="Button 2">
</form>

Answer 3

Не нужно использовать !important.используйте input.btn-active вместо

input[type="button"]{
  box-shadow: 0 0px 10px blue;
}
input.btn-active{
  box-shadow: 0 0px 10px red;
}

<input type="button" class="btn-active" value="Button 1">
<input type="button" class="" value="Button 2">