doubt about select in css

Asked

Viewed 102 times

-2

Hello, I would like to create a spacing in the options of my select, can someone explain to me how 

<form method= "POST" class="mb-0" action="includes-site/enviar.php" id="formcadastro" >
    <div>
        <label>Primeiro Nome</label>
        <input type="text" name="nome" class="form-control"id="nome">
    </div>

    <div>
        <label>Email</label>
        <input type="text" name="email" class="form-control" id="email">
    </div>
    <div>
        <label>Telefone</label>
        <input type="text" name="phone" class="form-control" id="phone" onkeypress="mascara(this)">
    </div>
    <label>Qual Melhor forma de atendimento?</label>
    <select name="atendimento" id="Atendimento" class= "form-control">

    <option value="" disabled selected>Clique e Selecione</option>
    <option value="WhatsApp">Whatsapp</option>
    <option value="Email">Email</option>
    <option value="Ligação">Ligação</option>

    </select>
    <div>
        <input type="submit" class="btn btn--primary btn--block mt-10" value="enviar">
    </div>
    <div>
    <input type="hidden" name="titulo" value="<?php echo $tit;?>">
    </div>
</form>
html css
  • 1

    What kind of spacing do you need? Could you give an example of how you would like it to look?

5 answers

1

use "padding".


padding: 5px 5px 5px 5px;

top, right, bottom and left is the order of padding rules.
If you don’t want to abbreviate, use:


padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;

Remembering, you can change the value of "5px" pro as you want. In percentage, pixels, "in", all available options.

  • I get it, but I’m having second thoughts about how to call class in style, can you please explain to me?

  • Of course. Use: option{ enter the code here }

  • Since "option" isn’t class or id, you don’t need "." or "#" to call it.

  • You can also enter a class="option", but I believe it is redundant, since you can do it without :)

0

The padding is the most recommended in this case, it will create an internal space. The important thing is that you set it to all sides, otherwise you end up throwing content from to a place you don’t want.

padding: 5px;

ooooooooou, you can make for all one by one: 

padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
  • 1

    That doesn’t work

  • 1

    You can send me your code then?

  • 1

    With padding is that it is not friend, now as it does I do not know, you could have tested your code before posting. Answer qq thing in help, especially if it doesn’t work...

0

Correction: Works only on the <Select>

You can also use a class (or ID) on and manipulate the padding or margin of the option, type: 

select {
 padding:5px;
}
  • 1

    That doesn’t work

  • I edited... After testing I realized that works only in Select

-1

Use padding in options

In the CSS

.option {
    padding: 10px;
}

In HTML

<option class="option" value="" disabled selected>Clique e Selecione</option>
<option class="option" value="WhatsApp">Whatsapp</option>
<option class="option" value="Email">Email</option>
<option class="option" value="Ligação">Ligação</option>

-2

In a quick way you can use the tag en <br>, or you can use CSS to add margin or padding depending on what you want to do.

Edit:

I didn’t notice that it was spacing between the options, it is not possible to use the <br> amid option

Sorry :/

  • tried to use br and did not work, did I put wrong? Thanks for the help! ^^

  • Then use CSS by adding a class to the element and adding CSS

  • 1

    That doesn’t work

  • :/ really, but thanks for trying to help. ^^/

Browser other questions tagged html css

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