Как отредактировать select и input radio в Bootstrap?

Question

[dhat]

К примеру тут, border у .form-control легко перезаписался и поменялся, а вот тот же border у select уже не работает. Почему? Как отредактировать select?

Также как поменять цвет у radio buttons? https://codepen.io/dhatt/pen/pEykya?editors=1100

Answer 1

[devstudent]

потому что в коде поверх selecta наложены элементы button и div и вам над менять их стили, а у радио поверх них лежат дивы с фоном , вот:

.iradio_square-blue {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 22px;
    height: 22px;
    background: url(blue.png) no-repeat;
    border: none;
    cursor: pointer;

надо посмотреть в бутстрап, возможно достаточно заменить класс на .iradio_square-red и они станут красными, если нельзя так и ли вам не подходит то просто переопределить стили в вашем css-файле , убрать фон или поставить другой

Comments

[dhat]

1. Добавление бордера к div в котором находится селект делает совершенно другое - https://codepen.io/dhatt/pen/pEykya?editors=1100
button наложенного поверх select я не вижу, вы оговорились?

2. А откуда вы взяли этот код для .iradio_square-blue? Из исходников Бутстрапа?

[devstudent]

dhat: 1. не не оговорилась, у вашего селекта element.style {
display: none;
}2. в консоли все видно и без исходников

[dhat]

devstudent: теперь я вообще в замешательстве. Откуда взялись все эти HTML элементы, которые я вижу в DevTools?

[dhat]

devstudent: спасибо, этот код в Codepen кривой какой-то. Сделал окально на компе - все работает!

[devstudent]

dhat: если вы их ен писали сами в разметку значит сгенерированы скриптом бутстрап

Answer 2

[Rumiour]

https://silviomoreto.github.io/bootstrap-select/

Цвет у radio buttons не поменяешь, потому что они заданы картинкой. Можешь сам нарисовать. Или через css задать.

Answer 3

[Николай Шипилов]

Я бы посоветовал не редактировать стандартные стили bootstrap, а создать новый файл и перезаписывать их в нем. Соответственно его подключить после файлов bootstrap. Удачного дня!

Comments

[dhat]

Я так и делаю, добавление новых классов НЕ меняет select. Посмотрите codepen.