My select does not resize to the font size. How to resolve?

Asked

Viewed 32 times

0

I added a select in my form, but when I put the font size of 35px the select does not fit the font size, a cut occurs.

See in the image below what happens:

inserir a descrição da imagem aqui

I need the font size to be really 35px, how to solve this situation?

HTML

<figure class="cx-fotos-portugal">

    <form>
    <select>
        <option selected="selected">Escolha a cidade</option>
        <option value=""></option>
    </select>
    </form>

    <img src="./fotos-portugal/foto-portugal-capitania-do-porto-cascais.jpg">

</figure>

CSS

    figure.cx-fotos-portugal{
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

figure.cx-fotos-portugal form{
    position: absolute;
    background-color: #ccc;
    padding: 20px;
    border-radius: 10px;
}

figure.cx-fotos-portugal img{
    width: 100%;
    height: 100%;
    max-height: 550px;
}

figure.cx-fotos-portugal form select{
    font-size: 35px;
    padding: 5px;
    border: 1px solid #b9bdc1; 
    color: #797979; 
}
html css

  • What would that be height: 20%; on the form?

  • I’ll update my code

  • This is not a valid answer to the question asked.

  • Gladison, I’ve presented several solutions to you in a few questions that oddly never work. If you take the code that you made available and pass to an executable be the Stack Overflow itself, or a Jsfiddle or any other, you will see that the select fits perfectly to the font size.

  • @Gladison now your code works. It just doesn’t make sense your question. What’s wrong?

  • @Andersoncarloswoss The source of my seletc remains the same as the image shown above.

  • It does not, no. See: https://jsfiddle.net/acwoss/vur5vfyj/

  • @Bsalvo Amigo, now it worked! But I had to put height: 70px;. I understand and I recognize your help, but when it didn’t work I’m being truthful.

  • 1

    Good that it worked, you edit to 70px but the idea is the same. The answer is height.

  • @Andersoncarloswoss It must be heritage of some css that causes this. Because I had to put height: 70px; to work.

Show 5 more comments

1 answer

1


Set height on your select:

figure.cx-fotos-portugal form select{
    font-size: 35px;
    padding: 5px;
    border: 1px solid #b9bdc1; 
    color: #797979; 
    height: 70px;
}

  • Unfortunately it didn’t work, it’s still the same.

Browser other questions tagged html css

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