Tips for aligning a label next to a customized checkbox in a web form

I'm having trouble aligning a label with my custom-styled checkbox. I found this cool CSS toggle switch as a styled checkbox and implemented it using the following HTML:

<label>
  <input id="test" class="cmn-toggle cmn-toggle-round" type="checkbox" />
  <label for="test"></label>
  testlabel
</label>

In addition, I have applied the following CSS:

input.cmn-toggle-round + label {
  padding: 2px;
  width: 60px;
  height: 30px;
  background-color: #dddddd;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;
}
input.cmn-toggle-round + label:before, input.cmn-toggle-round + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
input.cmn-toggle-round + label:before {
  right: 1px;
  background-color: #f1f1f1;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;
  -webkit-transition: background 0.4s;
  -moz-transition: background 0.4s;
  -o-transition: background 0.4s;
  transition: background 0.4s;
}
input.cmn-toggle-round + label:after {
  width: 29px;
  background-color: #fff;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  -webkit-transition: margin 0.4s;
  -moz-transition: margin 0.4s;
  -o-transition: margin 0.4s;
  transition: margin 0.4s;
}
input.cmn-toggle-round:checked + label:before {
  background-color: #8ce196;
}
input.cmn-toggle-round:checked + label:after {
  margin-left: 30px;
}

Instead of appearing next to the checkbox, the label text is showing up below it. Here's an example screenshot:

I'm wondering why this is happening and how I can get the label positioned correctly to the right of the checkbox.

htmlcss

Answer №1

The content in your text label is appearing below the toggle button because it's currently set to display as a block element. There are a couple of ways you could address this issue: 1. Change the display property to inline-block, which will align the text next to the toggle button. 2. Keep the display property as block, but also add float: left to the toggle button so that the text aligns properly next to it.

You may need to adjust the margin/padding of the text as needed, and consider wrapping it in a div or other container for easier styling options.

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

Glide your cursor over the button as it swirls with

I am attempting to create a button with an animation inside that includes both text and the animation itself. Currently, the animation (switching from png to gif) only works when I hover my mouse over a specific area of the button, rather than the entire b ...

javascripthtmljquerycss

Tips for utilizing asp:image in the code-behind

I'm having trouble with rendering an asp:image in my code behind. Let me explain my approach: In the Default.aspx file, I simply have one label element. In the code behind, I create a string variable and populate it, then assign this value to the labe ...

c#htmlasp.netimagecode-behind

Floating elements can be vertically aligned with spans

I am facing an issue with aligning three spans vertically inside a div. It seems simple to achieve, but vertical alignment is not working properly when I use float. My goal is to have the light blue bar vertically centered. Here is the code snippet: .co ...

htmlcsspositionalignmentvertical-alignment

Adding content to a div using the document.write method

I am attempting to insert text into two distinct DIVS with IDs of DIV1 and DIV2 on an HTML page called home.html from a JavaScript file named main.js using the document.write() method. When the button on the HTML page is clicked, the corresponding text sho ...

javascripthtml

"Adjusting the Bootstrap slider's width to fit the parent container at the

My slider is not taking up the full width of my container. I've tried setting the CSS properties to 100% width and height, but it doesn't seem to work as expected (see image link below). The slider needs to occupy the entire width of the containe ...

htmlcsstwitter-bootstrap

Converting HTML text input into a PHP variable

How can I achieve a html text input with name="input1" to be a php variable named $value? Here is what I have tried: <html> <form action="added.php" method="post" /> <p>Send a message to JANNES database: <input type="text" name="i ...

phphtml

Two classes with dynamic behaviors were added simultaneously to the same element

On my Bootstrap website, I integrated fullpage.js. However, I encountered an issue where two dynamic classes were added to the same element simultaneously, which caused a change in functionality. Only one class should be added to the element. I attempted ...

javascripthtmltwitter-bootstrap

Enhancing Buttons with Stylish CSS Coloration

Looking for a way to style a list of buttons with the same shape and size but different colors? The buttons have unique IDs and all belong to the same class. Take a look at the code snippet below: --html snippet <ul id="query_type"> <li class= ...

htmlcss

How can I create a grid layout in Bootstrap using columns of sizes 1.5, 8.5, and 2?

Currently working with the bootstrap grid system and facing a dilemma - col-sm-1 is too small, while col-sm-2 is too big for my needs. Is there a way to create something in between like col-sm-1.5 without causing the entire bootstrap grid to collapse? ...

htmlcsstwitter-bootstrap

Adjust the dimensions of a button in Jquery Mobile using a designated class

I am in the process of creating a Mobile App using Jquery Mobile, I'm aiming for a result like this: Unfortunately, what I end up with is this: I prefer not to utilize .ui-btn in my CSS, as I have already specified custom-btn. Here's the code s ...

jquerycsshtmljquery-mobile

Creating a Dynamic Navigation Bar using React and NextJS

How can we implement a Responsive Menu with React and NextJS? The magic happens when the user clicks a button, triggering the inclusion of the "open" class within the "menu" class. The rest is taken care of by the CSS styles. Illustrative code snippet: . ...

cssreactjsnext.js

Execute JavaScript with URL parameters prior to finishing Page load

I have spent hours searching for a solution, trying different methods but none of them seem to work... Here is the code snippet I am struggling with: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>&l ...

javascriptjqueryhtmlasp-classic

Issue with positioning of menu items

I need help creating a header menu. You can view the code I've been working on here: http://jsfiddle.net/kc2cc/ . My goal is to have the clicked menu item (logo, places, events or groups) move down 1px when clicked, and return to its original positio ...

htmlcsspositioning

Concealing an element by using parentElement.getElementsByClassName to set the display property to none

I am attempting to hide a button that generates a new element upon being clicked (to then be replaced by a delete button), but I'm struggling to set the display property to "none" when trying to target the same element using parentElement and then ret ...

javascripthtml

Ways to combine multiple CSS styles for an element using .css()

I'm struggling to apply styles to a deeply nested element using jQuery and JavaScript. I understand how to style nested elements, but I'm having trouble targeting a specific deeply nested element. My website is built on WordPress, and it has ins ...

jqueryhtmlcss

Tips for removing special characters from HTML?

I'm currently grappling with the concept of the filter My situation is as follows: $htmlData includes a user-entered html string formatted like this $htmlData = array('<em>test</em>', 'text here','\n') ...

phphtml

Is there a way to supply a list of HTML elements as an argument to a Closure template function?

Below is the template I am working with, and I am looking to pass a list of HTML elements as a parameter: {template .myTemplate} {@param title: string} {@param? listHtml: list<html>} <ul> {foreach $item in $listHtml} & ...

javascripthtmlgoogle-closure-templates

Is there a way for me to expand the dropdown menu?

My current dropdown looks like this. I'd like the dropdown menu to span across the screen, something like this: To create my dropdown, I am using https://github.com/angular-ui/ui-select2. AngularJS JQuery Select2 I'm not sure if there is an ...

jquerycssangularjsdrop-down-menu

My website is experiencing issues with the inner border being transparent and not displaying correctly

I have encountered an issue where the inner border only appears transparent on a single page or JSFiddle, but for some reason it is not working on my website. Can anyone offer any assistance on what might be causing this problem? The border is displaying ...

javascripthtmlcss

Adjust the HTML content prior to displaying it to prevent any flickering

Is there a way to run code before the page is rendered, such as updating dates or converting text to HTML, without causing flickering when reloading multiple times? How can I ensure the code runs as it's drawn instead of waiting until the end to redra ...

javascripthtml