How to edit select and input radio in Bootstrap?

Question

css

For example, here, the border of .form-control was easily overwritten and changed, but the same border of select no longer works. Why? How to edit select?
Also how to change the color of the radio buttons? https://codepen.io/dhatt/pen/pEykya?editors=1100

Answer 1

because in the code, the button and div elements are superimposed on top of the selecta and you need to change their styles, and the radio has divs with a background on top of them, here:

.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;

you need to look in the bootstrap, maybe it’s enough to replace the class with .iradio_square-red and they will turn red, if it’s not possible and if it doesn’t suit you, then just override the styles in your css file, remove the background or put another one

Answer 2

https://silviomoreto.github.io/bootstrap-select/
You can't change the color of the radio buttons because they are set by the image. You can draw yourself. Or set via css.

Answer 3

I would advise not to edit the standard bootstrap styles, but to create a new file and overwrite them in it. Accordingly, connect it after the bootstrap files. Have a good day!