Problem in the size of HTML checkboxes

Question

Problem in the size of HTML checkboxes

Navigation

#1 by (2 votes)

2

I have a problem with the size of my checkboxes, each one is getting a different size than the other. I solulated ul with a class, so that this element caught no trait of the other uls for which I had already defined a style. Can anyone tell me why checkboxes are getting different sizes? And how could I solve this. Here is the print of the page and the code for you to see 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><metaname="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>

html5 css3 checkbox

asked by anonymous 28.06.2017 / 21:55

1 answer

NodeJs api with promisses Leave the autocomplete search in bold

score 2 · Accepted Answer

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

This is because of display: flex in your CSS for .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;
}

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