I've designed a custom checkbox where the actual checkbox is hidden and a label is styled to look like a checkbox. Everything works fine, however, when I add a label, it doesn't align properly. Here's the link to the fiddle:
http://jsfiddle.net/1aeur58f/130/
verticals alignment: middle;
It was supposed to work, but unfortunately it didn't. Can someone help me resolve this issue?
If you have the option to modify your HTML code, I recommend using pseudo-elements to design custom checkboxes.
html
<div class="checkboxFour">
<input type="checkbox" value="1" id="checkboxFourInput" name="" data-toggle="modal" data-target="#myModal" />
<label for="checkboxFourInput">custom label</label>
</div>
css
input[type=checkbox] {
visibility: hidden;
}
. checkboxFour {
width: 10px;
height: 10px;
background: #ddd;
margin: 20px 90px;
border-radius: 100%;
position: relative;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.checkboxFour label:before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-right: 3px;
border-radius: 0;
transition: all .5s ease;
cursor: pointer;
z-index: 1;
background: #333;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.checkboxFour input[type=checkbox]:checked + label:before {
background: #26ca28;
}
#boxlabel {
vertical-alignment: middle;
}
View the Jsfiddle
The reason why the label didn't show up was because you forgot to include the quotes after your ID boxlabel. By adding the quote, the label will appear as expected.
For tips on styling, you can refer to this informative article:
For your code adjustments, I recommend closing the id="boxlabel" tag (ensure there are two quotation marks) and including display: inline-block for .checkboxFour.
If you're looking for great examples of checkbox styling, check out this link
I've implemented a responsive grid where each item has its own hidden details section that is revealed upon clicking the item. The structure of the HTML/CSS setup is as follows: <div class="grid"> <div class="item"> ...
I am currently utilizing the unslider plugin to design a full-width slider header on a webpage (). Although it functions well at the dimensions I set it up for (1920x450), issues arise when viewed on different screen resolutions. See below: The background ...
<input type="date" onChange={(e)=>setDate(e.target.value)}/> <input type="time" onChange={(e)=>setTime(e.target.value)} /> If the selected date is after today and the time is after the current time, display a valida ...
I'm struggling to create a slanted angle div that remains responsive as the screen size changes. Unfortunately, my current layout breaks completely when the screen gets bigger. If you'd like to take a look at what I've been working on so fa ...
The input-group-btn for the targetDate field remains fixed on the right side of the input group despite screen width variations until I introduce the automatically generated CSS from the hottowel generator. I require assistance in identifying which aspect ...
Upon loading the site, an image is displayed with the following code: <img id="some_Image" src="some_source"> However, I am looking to avoid requesting this image again from "some_source". This is because calculating the image can be resource-inten ...
I am working on a navigation bar that has a dropdown menu which appears on hover. I want the size of the dropdown menu items to match the size of the parent element. Here is an image for reference: https://i.stack.imgur.com/oNGmZ.png Currently, the "One ...
I recently developed a new WordPress theme and encountered an issue while trying to load specific stylesheets for my child sites using the is_page(array('')) function in my function.php file. Surprisingly, only the files that were added to all of ...
Here's the scenario: I have 3 block elements arranged in a specific order: Image Hidden Text Block (.hidden) Footer Block (.blockimage) When the page loads, the image is displayed over the hidden text block (which contains further infor ...
Apologies if I'm making mistakes, I'm just starting out with coding and navigating this website. So here's the deal: I am trying to add advertisements to my website on the left and right sides of the centered "Logo" at the top. The issue i ...
How can I make both the menu item and its icon clickable as a link? When either is clicked, the link should work. Here is a CodePen example: http://codepen.io/emilychews/pen/wJrqaR The red square serves as the container for the icon that will be used. ...
I need some help with adjusting the width of a section on my webpage to fit the browser size. Currently, I am using width: 100%, but this is causing scrollbars to appear. Unfortunately, I can't use overflow-x: hidden; as it will hide some of the conte ...
I crafted an html e-mail using the code below: <!DOCTYPE html> <html style="margin:0px;padding:0px;"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> </head> <body style="mar ...
When writing code like the example below: document.querySelector('input[type=text]').addEventListener('focus', function() { document.querySelector('#deletebutton').style.display = 'none' }) input[type=text]:focu ...
I'm currently working on bundling some NPM modules using webpack instead of utilizing a CDN. While I've successfully managed to integrate the .js files, I'm facing challenges with including the .css files for these modules. One example is ...
Is there a way to create a video pop-up in the same window when visiting a website? I want the video to increase in height from 0 to a specific height and move slightly upwards. Are there JavaScript or jQuery functions that can achieve this effect? I wou ...
Is it possible to achieve the following scenario using just HTML and CSS? I want to display the background image of my HTML body through a clipped div. Keep in mind that the final website needs to be responsive (mobile-first), so any solution should accom ...
When I view my website, http://www.healthot.com, on an iPhone or other mobile device, the page doesn't display correctly. It scales the window, requiring me to zoom out to see the entire page. To better understand the issue, please refer to this photo ...
Is there a way to prevent the blue div from overflowing the red div, but still always fill its parent container? I searched on stackoverflow and found suggestions to use height: 100%, but this causes issues when the child element has padding. How can this ...
I need help with creating a footer div that sticks to the bottom, left, and right of the page. The current footer doesn't extend all the way down and left. How can I resolve this without using "position: fixed;"? Below is the code snippet (I have rep ...