Style Bootstrap 4 select combo box

Asked

Viewed 424 times

-1

boostrap 4 combo box styling is possible ? 

  <div class="form-group">
      <select class="form-control pesquisa__select col-12">
         <option>teste 01</option>
          <option>teste 02</option>
          <option>teste 03</option>
       </select>
  </div>
select combobox

  • Yes, it’s possible, what you intend to do?

  • I would like to take the blue embroidery of the combo box, leave more rounding the corners, leave more beautiful.

2 answers

1


It is possible to make this change styling the element itself, in the example below I used a class=selectCustom and made all my changes to that class.

In its file calls, the styling file should be called after the bootstrap file in the head tag.

select.selectCustom:focus {
    box-shadow: 0 0 0 0;
    border: 1px solid #ccc;
    outline: 0;
}
select.selectCustom{
  border-radius: 30px !important
}
select.selectCustom option{
  color: #ff0;
  background-color: #f00
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="form-group">
  <select class="form-control pesquisa__select col-12 selectCustom">
    <option>teste 01</option>
    <option>teste 02</option>
    <option>teste 03</option>
  </select>
</div>

  • So.. I want to style the combo box that opens, options.

  • I understood, was not very clear in the question, the options of the element select, it is only possible to change the background and color, as in the code above, if you wanted to do more styling, you can create your own select, as some plugins already use, such as select2

  • I really was not very assertive in the question, I will check this plugin. I appreciate the help !

-2

Browser other questions tagged select combobox

You are not signed in. Login or sign up in order to post.