Есть ли способ сбросить свойства CSS границы, границы радиуса и фона?

Question

Я использую загрузку Twitter для CSS страницы, где у меня есть вход. Bootstrap определяет: border: 1px solid rgb (204, 204, 204); background-color: rgb (255, 255, 255); border-radius: 3px 3px 3px 3px; для элементов выбора.

Я хочу сбросить (путем перезаписи в моем собственном CSS) эти свойства CSS Bootstrap. Я попробовал: auto, inherit, none. Но никто не работает. Я также попробовал префикс -moz для радиуса. Нет успеха.

Я вижу, что это не работает, потому что в Firefox, который не имеет границ и НЕТ, стиль границ и НЕТ фонового цвета визуализируются аналогичным образом с браузерами webkit.

Вы можете проверить это, комментируя эти правила в представлении веб-разработчика -> Inspect -> CSS.

Как я могу сделать все это, не касаясь библиотеки Bootstrap?

Answer 1

Объявления Bootstrap имеют более высокий specificity, чем ваш.

Вы можете проверить это, добавив !important после объявления: border: none !important

Не грузите с этим кодом, однако. Чтобы исправить это правильно, используйте другой класс или id, чтобы переопределить CSS Bootstrap.

Answer 2

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

Answer 3

-webkit-border-radius: 0px; 
-moz-border-radius: 0px; 
-o-border-radius: 0px; 
border-radius: 0px; 
border: 0px; 

Это должно сбросить границы. Пока ваши предпочтительные стили появляются позже, чем те, которые предоставляются Bootstrap, они будут иметь приоритет. Кроме того, внешний вид -moz может помочь вам переопределить появление Firefox по умолчанию (или сбросить их).

• https://developer.mozilla.org/en-US/docs/CSS/-moz-appearance

Answer 4

Чтобы сбросить свойства, использовать значение "начальный", работает на все свойства:

-webkit-border-radius: initial; 
-moz-border-radius: initial; 
-o-border-radius: initial; 
border-radius: initial; 
border: initial;