0
Hello
I have four selects and each select has its specific title, but I have a problem although I in HTML have the title on top of the select and below a button, the title of the select appears on top of the button in the center and I would like that title to go back-if in his place, someone knows how to solve this mistake?
<button id="filtroselects">
<img src="/imagens/iconfiltro.png" height="40px" width="40px"> Filtros
</button>
<div id="escolha">
<form id="selectsfiltro">
<h6>Faixa Etaria:</h6>
<select id="FaixaEtaria" class="custom-select">
<option></option>
<option value="1">0-17</option>
<option value="2">18-25</option>
<option value="3">26-35</option>
<option value="4">36 ou mais</option>
</select>
<br/>
<br/>
<h6>Sexo:</h6>
<select id="Sexo" class="custom-select">
<option></option>
<option value="5">Masc</option>
<option value="6">Fem</option>
</select>
<br/>
<br/>
<h6>Recurso a arma:</h6>
<select id="RecursoArma" class="custom-select">
<option></option>
<option value="7">Sim</option>
<option value="8">Não</option>
</select>
<br/>
<br/>
<h6>Localidade:</h6>
<select id="Distrito" class="custom-select">
<option ></option>
<option value="9">Viana do Castelo</option>
<option value="10">Vila Real</option>
<option value="11">Bragança</option>
<option value="12">Braga</option>
<option value="13">Porto</option>
<option value="14">Aveiro</option>
<option value="15">Viseu</option>
<option value="16">Guarda</option>
<option value="17">Coimbra</option>
<option value="18">Castelo Branco</option>
<option value="19">Leiria</option>
<option value="20">Lisboa</option>
<option value="21">Santarém</option>
<option value="22">Portalegre</option>
<option value="23">Évora</option>
<option value="24">Setúbal</option>
<option value="25">Beja</option>
<option value="26">Faro</option>
<option value="27">Açores</option>
<option value="28">Madeira</option>
</select>
</form>
</div>CSS:
#filtroselects {
background-color: rgba(000, 000, 000, 0.0);
color: white;
border: 0;
cursor: context-menu;
margin-bottom: 10px;
margin-left: -8px;
font-size: 25px;
float: left;
margin-top: 30px;
}
Have you tried using Abels?
– Afonso
David without his CSS does not help you much, because if you run this Snippet there your question you will see that it is all right, then the problem is in CSS and not in HTML, Edit your question and include CSS tb without it does not answer you
– hugocsl
@hugocsl the only css that I have was the one that I put the rest of the ids are used with scripts for the selects and some functions work, this was only like this after we put some functions for mobile phone, but supposedly should only edit on mobile phone, there is no code that I can put for the select title to be on top of select automatically?
– David Mv
@Afonso no, I don’t know what that is either.
– David Mv
<div id="choose"> Close this div?
– Pbras
@Pbras Yes this div only serves to make a script for mobile phone does not have much to do with select for computer, I must have forgotten to close when I copied select to the site.
– David Mv
Okay, try changing Dysplay from
<button id="filtroselects">, https://www.w3schools.com/cssref/pr_class_display.asp without using the web inspector do not know what is best for you to put there but there must be one that solves this problem, try the following, flex, inline, block, grid, just add onestyle="display=XXX;"there to experiment with these values, then say if any of these help.– Pbras