How to make checkboxes not overflow other elements?

Question

I have edited the default checkboxes look of HTML and created my own styles, the thing is that the property position of the checkbox makes it bypass other elements, how can I avoid that?

Example of what is happening: https://www.screencast.com/t/ELwluGBaX

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap css -->
    <!-- CSS only -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,500,700&display=swap" rel="stylesheet">
    <!-- Our css -->
    <title>Session Asigment</title>
    <style>
        label::before {
    content: "";
    border: solid 1px #FF6E0B;
    position: absolute;
    width: 1.4em;
    height: 1.4em;
    border-radius: 3px;
}

input[type=checkbox] {
    display: none !important;
   
}
.checkbox-titles [type=checkbox]:checked + label:after {
    /* check */
    font-family: "Font Awesome 5 Free";
    color: #fff;
    content: "\f00c";
    font-weight: 900;
    padding-left: 0.2em;
    padding-bottom: 0.2em;
    /* Label */
    position: absolute;
    width: 1.4em;
    height: 1.4em;
    border-radius: 3px;
    background-color: #FF6E0B;
}

        
    </style>
</head>
<body>
<div class="checkbox-titles">
                                <input  type="checkbox" value="test" id="test">
                                <label for="test"></label>
              

</body>
<!-- Bootstrap and jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!--select2-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>
</html>

remove position: absolute;, add display: inline-block; add margin-right: 5px; — Lwin Htoo Ko, Sep 26 '21 at 19:02
Using `display: inline-block;` fix the `absolute` issue but loses the marked of checkbox @LwinHtooKo, so appears like it can not be marked — Rinzler21, Sep 26 '21 at 20:43
@LwinHtooKo The width and the height are ok the thing is that this happens https://www.screencast.com/t/ceBrFwjwY — Rinzler21, Sep 30 '21 at 02:45

score 0 · Answer 1 · answered Sep 26 '21 at 19:02

0

Position absolute removes the item from the flow of the DOM.

Elements that are not positioned absolutely act as if the ones that are dont even exist.

I suggest using something like Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Or i suggest using the normal positioning, position: static

answered Sep 26 '21 at 19:02

Sweet Chilly Philly

3,014
2
27
37

Using `position: static` makes the checkbox lose his width also the same with the `flex` take a look https://www.screencast.com/t/m7331Dijn – Rinzler21 Sep 26 '21 at 20:49
hold up, this is just wrong. Why are you hiding the initial checkbox and then trying to Create a new checkbox with :content:before?? Get rif of that stuff, and style the actual checkbox... – Sweet Chilly Philly Sep 27 '21 at 00:56
I tried to apply changes directly to the checkbox and didn't work, I have researched about it and right now the only way to change the styles is playing with the content `after` and `before` I have used this post as reference https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css – Rinzler21 Sep 27 '21 at 14:21

score 0 · Answer 2 · answered Sep 30 '21 at 06:45

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap css -->
    <!-- CSS only -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,500,700&display=swap" rel="stylesheet">
    <!-- Our css -->
    <title>Session Asigment</title>
    <style>
        label::before {
    content: "";
    border: solid 1px #FF6E0B;
    position: absolute;
    width: 1.4em;
    height: 1.4em;
    border-radius: 3px;
}

input[type=checkbox] {
    display: none !important;
   
}
.checkbox-titles [type=checkbox]:checked + label:after {
    /* check */
    font-family: "Font Awesome 5 Free";
    color: #fff;
    content: "\f00c";
    font-weight: 900;
    padding-left: 0.2em;
    padding-bottom: 0.2em;
    /* Label */
    position: absolute;
    width: 1.4em;
    height: 1.4em;
    display: inline-block;
    border-radius: 3px;
    background-color: #FF6E0B;
}
.checkbox-titles label {
    width: 1.4rem;
    height: 1.4rem;
    display: inline-block;
    vertical-align: middle;
}
        
    </style>
</head>
<body>
<div class="checkbox-titles">
                                <input  type="checkbox" value="test" id="test">
                                <label for="test"></label><span>Test Bla Bla Bla</span>
              

</body>
<!-- Bootstrap and jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!--select2-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>
</html>

How to make checkboxes not overflow other elements?

2 Answers2