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 am experiencing an issue with a PDF rendering where very long words are not wrapping onto a new line, instead overflowing the container and disappearing off the page. Below is the setup causing this problem. The styles are listed followed by the actual ...
My setup includes a p:selectOneRadio constructed like this: <p:selectOneRadio id="positionRadio" value="#{employeeBean.empPosition}" converter="#{empPositionConverter}" layout="custom" required="true" requiredMessage="Please select ...
Encountering an issue with the property text-overflow:ellipsis. The ellipsis at the end of the truncated text is not showing up as expected. To maintain formatting without escaping data in ckeditor, I am using: {!! $treatment->description !!} speci ...
UPDATE: I believe there was an excess of information. Let me simplify my question: How can I adjust the height of #middle to be 100% of the remaining space in the example below: <body> <div id="big"> <div id="header"></div ...
When I use scale transform to zoom a div in HTML, the text inside becomes blurred. Is there a solution to make the text clear like the original? @keyframes scaleText { from { transform: scale(0.5, 0.5); } to { transform: scale(2, 2); } } ...
Throughout the ages, this question has persisted, with answers that have stood the test of time. I've explored various solutions, yet none have met my expectations. I aim to create a fully clickable link for div .content1 without relying on text or ...
I'm having some trouble with my Tailwind CSS and jQuery setup. After trying a few different things, I can't seem to get it working quite right. In the code below, you'll see that I have placed a focusout event on the outer div containing th ...
I'm looking for help with setting up a button to reset the checkboxes on my preferences page. UPDATEL: Here's more information: The solutions provided should only affect checkboxes that are currently selected, not those enabled onLoad. This is ...
I am working on a layout where I need three flex items (rows) in a flex container, and my requirement is to justify them as space-between... The first row will consist of cloud tags, the second will have a price, and the third will contain a Read more link ...
Here are my HTML code segments: <div class="div-builder"> <div> <a href="#"> <img src="/photos/20/Apple-Logo-icon.png" width="50" alt="Logo"> </a> <h3>Title</h3> < ...
Currently, I am using Flexslider version 1.8 and seeking to set up a fullscreen image slider on my homepage. My goal is to adjust the slider to match the browser window size. While experimenting with width:100% and height:auto properties, I have managed t ...
I am currently facing an issue with a dropdown menu that contains the list of products offered by our company. Specifically, one of the product names, Hotel Management Solutions, is appearing on multiple lines instead of a single line in the dropdown menu. ...
I am using pure-react-carousel which provides me an unstyled HTML button (ButtonBack). I would like to customize its style using material-ui. Trying to nest buttons within buttons is considered not allowed. An approach that works is manually assigning th ...
Hey everyone, I've been working on a scrolling animation to make text appear when it's at least 50% visible. So far, I have an animated header with an Onscroll Event and Intersection Observer for the text. It's all working well, except for ...
Is it possible to customize the CSS for Scala Helpers and remove certain text from the textfield? @inputText(advForm("weeknr")) @inputText(advForm("jaar")) @inputText(advForm("datum")) --------------------EDIT 1------------------ After applying my own ...
Is there a way to align multiple elements of varying heights against the top of a container, similar to what is seen on Wolfram's homepage? I noticed that they used a lot of JavaScript and absolute positioning in their code, but I'm wondering if ...
I have a WordPress website with a right sidebar that I want to make sticky while scrolling up and down. I applied some CSS styles to achieve this, and now the sidebar is sticky. However, the issue is that it keeps shifting its position from right to left. ...
Can you assist me in recreating my idea from an image? I am having trouble understanding how to select and place other elements, and then return them to their original positions after deselecting... I attempted to use a grid but it did not work properly. ...
In the process of creating a small webpage, I have designed 2 navigation panels - one on the left and one on the right. The leftNav panel contains a list of different flower names. While the rightNav panel displays images corresponding to each flower. A ...
My website uses CSS3 transitions and I have noticed that the -webkit- prefix works, but the -moz- prefix does not seem to be working. This is the CSS code I am using: article {z-index: 2; float: left; overflow: hidden; position: relative; -webkit-transit ...