Html Question posted in
Some basic documentation can be found here.

Html – What is this proprety of the select tag?

An image

There is this strange white border around the options of this select tag, I don’t know what causes it and I would like to get rid of it.

I tried setting "ouline:0;" but it didn’t work. I was hoping this white border would go away.

Html:

<select name="filtro" id="status">
   <option value="encerrado">Encerrado</option>
   <option value="pendente">Pendente</option>
</select>

Css:

#status{
    background-color: transparent;
    padding: 0.5em;
    border: 1px solid var(--blue);
    border-radius: 3px;
    transition: 0.5s;
}
#status option{
    background-color: var(--body-color);
    color: var(--blue);
}
#status:hover{
    cursor: pointer;
    padding: 0.65em;
}
Tags:

2

Answers


  1. 0

    You cannot style the dropdown itself. It is rendered on the canvas and cannot be controlled by HTML or CSS. You could add more functionality to the dropdown by using JavaScript. And that border might be caused by the browser or something else. There is no problem with your code either.

    Login or Signup to reply.
  2. 0

    if any style is not working then you can use !important property this will make your style as important and you can use outline: none on focus.

    #status{
    background-color: transparent;
    padding: 0.5em;
    border: 1px solid var(--blue);
    border-radius: 3px;
    transition: 0.5s;
    outline: none !important;
}
#status option{
    background-color: var(--body-color);
    color: var(--blue);
}
#status:hover{
    cursor: pointer;
    padding: 0.65em;
}
#status:focus {
    outline: none;
    border: 1px solid var(--blue);
}
    <select name="filtro" id="status">
   <option value="encerrado">Encerrado</option>
   <option value="pendente">Pendente</option>
</select>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search