Position the checkbox to the left of the label

I currently have a checkbox with ripple effects. The label text is displayed before the checkbox in the code.

However, I'd like to change the order so that the checkbox comes before the label text. Occasionally, the entire div expands and contracts.

<style>
@keyframes ripple {
    0% {
        transform: scale(0,0);
        opacity: 1
    }

    20% {
        transform: scale(25,25);
        opacity: 1
    }

    to {
        opacity: 0;
        transform: scale(40,40)
    }
}

#onoff+label {
    position: relative;
    display: inline-block;
    padding-right: 10px
}

#onoff {
    position: absolute;
    left: -9999px
}

#onoff+label::after {
    content: '';
    border: 2px solid rgba(0,0,0,.5);
    border-radius: 2px;
    position: absolute;
    top: 50%;
    right: -40px;
    transform: translate(-20px,-50%);
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    transition: background-color 1s;
    background-position: -2px -1px;
    background-color: rgba(255,0,0,.4)
}

#onoff:checked+label::after {
    border: 2px solid #0f9d58;
    background-color: rgba(15,157,88,.7);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgBwEQARzBMMQpAAAAN0lEQVQI12NgQAEHGBgYHzAwMAMxO5DN38AgIM/AYGHHwFBTw8Bg94OBQf4DUBgqzdwAVI5qAACbXgn3nmfmHgAAAABJRU5ErkJggg==)
}

#onoff:disabled+label::after {
    border: 2px solid rgba(0,0,0,.1);
    background-color: rgba(0,0,0,.05);
    background-image: none
}

#onoff+label::before {
    content: '';
    border-radius: 50%;
    background-color: rgba(0,0,0,.1);
    position: absolute;
    box-sizing: border-box;
    top: 50%;
    right: -10px;
    transform: translate(-50%,-50%) scale(0);
    width: 1.8px;
    height: 1.8px
}

#onoff:focus+label::before {
    animation: ripple 1s ease-out
}
</style>
<div align="left" class="onoffdiv">
<input id="onoff" type="checkbox" style="display:table-column"/>
<label for="onoff" style="margin-right: 30px;" class="lbl gray">Turn on/off</label>
<br/>
</div>

htmlcss

Answer №1

To achieve this functionality, you can utilize the code snippet below:

#onoff+label {
    margin-left: 30px;
    position: relative;
}

#onoff+label::after {
    left: -10px;
    right: auto;
}

#onoff+label::before {
    left: 0;
    right: auto;
}


<style>
@keyframes ripple {
    0% {
        transform: scale(0,0);
        opacity: 1
    }

    20% {
        transform: scale(25,25);
        opacity: 1
    }

    to {
        opacity: 0;
        transform: scale(40,40)
    }
}

#onoff+label {
    position: relative;
    display: inline-block;
    padding-right: 10px
}

#onoff {
    position: absolute;
    left: -9999px
}

#onoff+label::after {
    content: '';
    border: 2px solid rgba(0,0,0,.5);
    border-radius: 2px;
    position: absolute;
    top: 50%;
    right: -40px;
    transform: translate(-20px,-50%);
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    transition: background-color 1s;
    background-position: -2px -1px;
    background-color: rgba(255,0,0,.4)
}

#onoff:checked+label::after {
    border: 2px solid #0f9d58;
    background-color: rgba(15,157,88,.7);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgBwEQARzBMMQpAAAAN0lEQVQI12NgQAEHGBgYHzAwMAMxO5DN38AgIM/AYGHHwFBTw8Bg94OBQf4DUB...

#onoff:disabled+label::after {
    border: 2px solid rgba(0,0,0,.1);
    background-color: rgba(0,0,0,.05);
    background-image: none
}

#onoff+label::before {
    content: '';
    border-radius: 50%;
    background-color: rgba(0,0,0,.1);
    position: absolute;
    box-sizing: border-box;
    top: 50%;
    right: -10px;
    transform: translate(-50%,-50%) scale(0);
    width: 1.8px;
    height: 1.8px
}

#onoff:focus+label::before {
    animation: ripple 1s ease-out
}


#onoff+label {
margin-left: 30px;
position: relative;
}

#onoff+label::after {
left: -10px;
right: auto;
}

#onoff+label::before {
left: 0;
right: auto;
}

</style>
<div align="left" class="onoffdiv">
<input id="onoff" type="checkbox" style="display:table-column"/>
<label for="onoff" class="lbl gray">Turn on/off</label>
<br/>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I encountered an error while trying to synchronize my Redux state with the component state

Upon clicking the advanced sports search button, I need to display a drawer containing my API values. Currently, when mapping my Redux state with component state, an error is occurring stating "Actions must be plain objects. Use custom middleware for async ...

javascripthtmlreactjsreduxmaterial-ui

Why does Thymeleaf th:field treat null differently with input text than with radio buttons?

I recently started using Thymeleaf and the documentation has been very helpful so far. However, I've been stuck on a form for hours despite doing a lot of research! I am trying to preload test data in an HTML form (the actual data will come from a dat ...

javahtmlspringthymeleaf

Generate visual content from written text with the use of a form and store it on the

Struggling to implement a php function on my webpage that generates an image from text input. However, nothing appears to be happening when I execute the code: PHP - $to = $paths. '/card.png'; if (isset($_POST['make_pic'])) { $text = ...

phphtmlajaxformsimage

Learn to Generate a Mathematical Quiz with Javascript

For a school project, I am tasked with developing a Math Quiz which showcases questions one at a time. The questions vary in type, including Multiple Choice, Narrative Response, Image Selection, Fill in the blank, and more. I require assistance in creatin ...

javascriptjqueryhtmlcssbootstrap-4

How to vertically align content using Zurb Foundation's equalizer feature?

I am currently utilizing Zurb Foundation 5 along with the equalizer component. In a scenario where I have three columns of equal width, I am aiming to achieve vertical center alignment for the content (text) in the middle column and vertical bottom alignme ...

csszurb-foundation

Material UI Grid Items not stretching to fill the entire available width

I'm currently working with a nested Grid system in Material UI, but the Grid items are only occupying a fixed width and leaving some empty space. The issue arises when this fixed space is used up and instead of adjusting their internal free space, the ...

cssreactjsmaterial-uimaterial-designstyling

How to Build Two Navbars in BootstrapVue with a Sticky Bottom Navbar at the Top

My current project involves creating two navigation bars. The first navbar at the top consists of just a brand logo, while the second navbar at the bottom serves as the main navigation menu. I want the top navbar to scroll off the screen when users scroll ...

htmlcssvue.jsbootstrap-4bootstrap-vue

Error 404 encountered while attempting to access dist/js/login in Node.JS bootstrap

I currently have a web application running on my local machine. Within an HTML file, I am referencing a script src as /node_modules/bootstrap/dist/js/bootstrap.js. I have configured a route in my Routes.js file to handle this request and serve the appropri ...

javascripthtmlnode.jsnpm

What is the reason behind "Script" being considered the offspring of "Body"?

Unfortunately, I struggle with HTML/CSS/Javascript and am just trying to get through my exams. I have the code snippet below: <script> window.onload=function() { var c = document.body.childNodes; var txt = ""; var i; for ...

javascripthtml

Creating a stylish flyout search box using CSS

I am looking to create a search box that pops up when a button is clicked and disappears when clicked outside. My approach involves using CSS to achieve this functionality. Here is the HTML structure I am working with: <div tabindex="0" class="search" ...

htmlcsssass

Positioning a pair of dropdown menus side by side

Could anyone provide guidance on how to position two select boxes side by side within a table cell, ensuring they are responsive at the same time? Any help would be greatly appreciated. Thank you in advance! ...

htmlcss

Steps for adding a div after a specified number

To display the following div after getting a value greater than or equal to the specified value and retrieving it through ajax: 1. How can I show the below div with the given value? .mainbox{ width:auto; height:auto; padding:20px; background:#f00; } .i ...

javascripthtmljson

Refresh all tabs in the TabContainer

I have implemented multiple tabs using dojo on a web page, and I need to refresh the current tab every 5 seconds without refreshing the entire page. You can check out the code in this fiddle: http://jsfiddle.net/5yn2hLv9/4/. Here is an example of the code ...

javascriptjqueryhtmljspdojo

Expanding the padding within a box results in an increase in the overall height of the table row that encapsulates it

My goal is to create a table displaying marks with a box around each mark that expands slightly when hovered over to indicate activity. Below is the code I am using: .container { position: absolute; width: 80%; left: 50%; transform: translateX(-5 ...

htmlcss

Show the file name in the email signature instead of displaying the image

I'm facing a unique challenge with images in my HTML email signature. Sometimes the images are replaced by their file names on certain email hosts. Interestingly, I can't replicate this error now as the images are displaying correctly again! He ...

htmlcssimageemail

Having issues with nth-child? It seems like nth-of-type isn't working either

I am trying to change the color of all even titles from h2 to orange using nth-child. However, I seem to have made a mistake somewhere and can't figure out what it is... *{ font-size: 1em; } h2{ font-size: 1.5em } ...

csscss-selectors

Is it still necessary to include -webkit- and -moz- prefixes for widely recognized CSS3 properties?

I'm currently in the process of tidying up a CSS file, and I'm contemplating whether it's now acceptable to remove vendor-specific properties if they have been standardized (or at least partially standardized). For instance, should I contin ...

cssvendor-prefix

Dynamically adjusting the width of an HTML element with ng-style using percentage values in AngularJS

I am facing a challenge where I need to display a progress bar in my UI based on a percentage value stored in a JSON response object. Here is an example of the JSON object: { completionPercent: 42 } The desired UI outcome should look like this: ┌ ...

javascriptcssjsonangularjsdata-binding

Creating space between elements in CSS div elements

I've come across numerous resources on this topic that have already been answered, but none of them have provided a satisfactory solution. Here's the scenario: I have created a basic fiddle showcasing the desired behavior: @ See fidlle If I h ...

htmlcss

Disable the full screen camera mode on iOS browsers while live streaming camera video

I recently completed a tutorial on capturing video streams from the front or rear camera of an iPhone using JavaScript. The tutorial can be found at this link. While testing the functionality on my desktop browser, everything worked perfectly. However, wh ...

javascripthtmliosmediadevices