Bootstrap4 select transparent

Asked

Viewed 79 times

1

I implemented a select on a page using Bootstrap-4 classes for styling as below:

<select class="form-control" name="inputAssunto" id="inputAssunto" required>
   <option>Sugestões e críticas</option>
   <option>Cadastro de marcas e produtos</option>
   <option>Outros...</option>
</select>

I want this component to receive a transparent background-color, but I’ve tried styling the component in the class this way and it didn’t work. all inputs accepted background stylization, only this one.

.form-control {
  background: transparent !important;
  border: 0.3 solid #fff;
  outline: none;
  padding: 20px;
  margin: 20px auto;
  color: #fff !important;
}

When rendererizado the form stays this way. inserir a descrição da imagem aqui

I want select to have the same stylization of inputs, how to do?

css bootstrap-4

  • Which browser are you using? Put background:none !important and box-shadow:none !important to see if it resolves. If it works out tell me that put as answer... If you’re using a non-standard Bootstrap component tell me which tb can help you answer

  • Oba, all right? I did the test, no effect, the browser is safari, I tested it in firefox and the background-Transparent worked. But your touch on the browser helped me to find the solution, it was something related only to Safari, so I used -Webkit-Appearance:None; Ai worked. You can put in the answer, helped me a lot. Thank you.

  • Cool that solved then, I thought it could be something connected to crossbrowser, but as I do not have Safari here I could not test. I left an answer there, so the question is not unanswered, It was worth the strength

1 answer

1


What happens is that some elements are stylized by user-agente, and to overwrite this style sometimes you need to use the prefix vendor browser. You can read more about user-agent here: What is User Agent Stylesheets?

As you said you are using Safari, to customize the element you first need to clean the styles of this user-agent, for that you use the property -webkit-appearance:none; (Obs: in the case of Firefox -moz-, IE -ms-, Opera -o-)

Then your CSS would look like this:

.form-control {
  -webkit-appearance:none; /* propriedade para limpar estilos do user-agent */
  background: transparent !important;
  border: 0.3 solid #fff;
  outline: none;
  padding: 20px;
  margin: 20px auto;
  color: #fff !important;
}

Browser other questions tagged css bootstrap-4

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