Remove HTML or body border

Asked

Viewed 64 times

-1

I need to remove these edges (which I highlighted in green) that are in my extension. I want there to be nothing there or at least to be transparent so that the box-shadow have effect and stay round as well as the div.

I’ve tried to define the background-color of body for transparent but it doesn’t work. I also tried to round up the body along with the div to see if corrected but also failed to work.

Follows image demonstrating:

inserir a descrição da imagem aqui

Just follow my code:

* {
    padding: 0;
    margin: 0;
}

body {
    background-color: #48ff00;
    margin: 0%;
    border: none;
    outline: 0;
}

#corpo {
    width: 300px;
    height: 200px;
    background-color: #592C90;
  box-shadow: rgb(0 0 0 / 10%) 0 2px 4px 0;
  border: 2px #000000 solid;
  border-radius: 15px;
}


/* ------ Botões ------ */


.toggle {
    margin-bottom: 20px;
}

.toggle > input {
    display: none;
}

.toggle > label {
    position: relative;
    display: block;
    height: 28px;
    width: 52px;
    background-color: #F7F7F7;
    border: 2px #8E8F93 solid;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.toggle > label:after {
    position: absolute;
    left: 1px;
    top: 1px;
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 100px;
    background: #fff;
    box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
    content: '';
    transition: all 0.3s ease;
}
.toggle > label:active:after {
    transform: scale(1.15, 0.85);
}
.toggle > input:checked ~ label {
    background-color: #4cda64;
    border-color: #8E8F93;
}
.toggle > input:checked ~ label:after {
    left: 25px;
}
.toggle > input:disabled ~ label {
    background-color: #d5d5d5;
    pointer-events: none;
}
.toggle > input:disabled ~ label:after {
    background-color: rgba(255, 255, 255, 0.3);
}
<!DOCTYPE html>
<html>
    <head>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
        <div id="corpo">
            <div class="toggle">
                <input type="checkbox" id="onoff">
                <label for="onoff"></label>
            </div>

            <div class="toggle">
                <input type="checkbox" id="onoff2">
                <label for="onoff2"></label>
            </div>
        </div>
    </body>
</html>

  • can’t just remove the background-color of the body?

  • @Ricardopunctual if you do that he turns white

1 answer

0

Before:

body {
    background-color: #48ff00;
    margin: 0%;
    border: none;
    outline: 0;
}

Afterward:

body {
    background-color: none;
    margin: 0%;
    border: none;
    outline: 0;
}

Complete code:

* {
    padding: 0;
    margin: 0;
}

body {
    background-color: none;
    margin: 0%;
    border: none;
    outline: 0;
}

#corpo {
    width: 300px;
    height: 200px;
    background-color: #592C90;
  box-shadow: rgb(0 0 0 / 10%) 0 2px 4px 0;
  border: 2px #000000 solid;
  border-radius: 15px;
}


/* ------ Botões ------ */


.toggle {
    margin-bottom: 20px;
}

.toggle > input {
    display: none;
}

.toggle > label {
    position: relative;
    display: block;
    height: 28px;
    width: 52px;
    background-color: #F7F7F7;
    border: 2px #8E8F93 solid;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.toggle > label:after {
    position: absolute;
    left: 1px;
    top: 1px;
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 100px;
    background: #fff;
    box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
    content: '';
    transition: all 0.3s ease;
}
.toggle > label:active:after {
    transform: scale(1.15, 0.85);
}
.toggle > input:checked ~ label {
    background-color: #4cda64;
    border-color: #8E8F93;
}
.toggle > input:checked ~ label:after {
    left: 25px;
}
.toggle > input:disabled ~ label {
    background-color: #d5d5d5;
    pointer-events: none;
}
.toggle > input:disabled ~ label:after {
    background-color: rgba(255, 255, 255, 0.3);
}
<html>
    <head>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
        <div id="corpo">
            <div class="toggle">
                <input type="checkbox" id="onoff">
                <label for="onoff"></label>
            </div>

            <div class="toggle">
                <input type="checkbox" id="onoff2">
                <label for="onoff2"></label>
            </div>
        </div>
    </body>
</html>

I hope that’s it and I hope I helped

  • You can use Transparent instead of None tmb.

  • I still have a white background even with background-color: none; or background-color: transparent;. The following image: https://imgur.com/a/ayg81L9

  • I’ll try something, if it works return the script.

  • beauty. Thanks a brother!

Browser other questions tagged

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