Problem in HTML checkbox size

Question

Problem in HTML checkbox size

Asked 7 years ago

Viewed 4,115 times

2

I have a problem with the size of my checkboxes. I isolated ul with a class, so that this element did not take any characteristic of the other uls for which I had already defined a style. Would anyone know why checkboxes are getting different sizes? And how I could solve this. Follow the page print and code for vcs to visualize the problem:

body {
    display: flex;
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;
}




section#principal {
    width: 100%;
}

section#principal .modulo .container {
    height: ;
    padding: 20px;
}

section#principal .modulo .container .canvas {
    background-color: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    padding: 20px;
}

form ul {
    padding: 0; margin: 0;
    margin-bottom: 30px;
}

form li {
    list-style: none;
    margin-bottom: 10px;
}

form h2 {
    font-size: 20px;
    color: #161616;
    padding: 0; margin: 0;
    margin-bottom: 20px;
}

.confirmacoes li {
    font-size: 14px;
    display: flex;
    width: 400px;
}

.confirmacoes input {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Projeto 008</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="estilo.css">
    <script src="https://use.fontawesome.com/e0e1b97932.js"></script>
    <meta name="viewport" content="width:device-width, initial-scale=1">

</head>

<body>                        
 
 <section id="principal">
    
     <div class="modulo">
          
        <div class="container">
            <div class="canvas">
                
                <form action="">                     
                                      
                    <h2>Anythings</h2>
                    <ul class="confirmacoes">
                        <li>
                            <input type="checkbox">
                            <label>Güncelleme ve yenilikleri mail olarak almak istiyorum.</label>
                        </li>
                        <li>
                            <input type="checkbox">
                            <label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id nisl eget nunc molestie maximus.</label>
                        </li>
                    </ul>
                                       
                </form>
                
            </div>
        </div>
        
     </div>
     
 </section>
                   
</body>
</html>

1

Why display: flex in .confirmacoes li?

– Woss

2017/06/28 at 20:00
To align the checkbox with the label. It’s wrong?

– Alineat

2017/06/28 at 20:35

1 answer

Browser other questions tagged html5 css3 checkbox

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

by Oralista de Sistemas • **23,115** points · Answer 1 · 2017-06-28T20:06:40+00:00

The checkbox is varying in size according to the size of the text. If you sufficiently increase the text of the first checkbox, it is smaller than the second.

This is because of display: flex in your CSS to .confirmacoes li. If you want to keep this, my suggestion is to use min-width and min-height in your CSS:

.confirmacoes input {
    min-width: 20px;
    min-height: 20px;
    margin-right: 5px;
}

This way the browser understands that it should not use less than 20px for the width and height of the checkbox, even with the display: flex in the element li which contains the checkbox.