The alignment of the text does not match the custom checkbox

Looking to customize checkboxes in GWT with CSS only. Successfully styled checkboxes without text, but struggling with checkboxes next to text.

Current appearance: https://i.sstatic.net/Z3uYH.png

Desired look: https://i.sstatic.net/Ligx1.png

  <span class="gwt-CheckBox" id="i294">
<input tabindex="0" id="gwt-uid-3" type="checkbox" value="on">
<label for="gwt-uid-3">Run task immediately after finish</label>
</span>

HTML

input[type="checkbox"] {
    visibility: hidden;

}
input[type="checkbox"]+label {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(images/custom_html_elements_sprite.png) 0 0;
}

input[type="checkbox"]:checked+label {
    display: inline-block;
    width: 16px;
    height: 16px;

    background: url(images/custom_html_elements_sprite.png) -64px 0;
}

CSS

Seeking assistance with this challenge

EDIT:

Link to fiddle provided

https://jsfiddle.net/2j0zke2z/

htmlcssgwtcheckbox

Answer №1

It provides the perfect solution: (adjust padding to your preference)

input[type="checkbox"] {
    visibility: hidden;

}
input[type="checkbox"]+label {
    display: inline;
    width: 16px;
    height: 16px;
    padding:0 0 0 16px;
    background: url(https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/ok_16x16.gif);
  background-repeat: no-repeat;
}

input[type="checkbox"]:checked+label {
    display: inline;
    width: 16px;
    height: 16px;
    padding:0 0 0 16px;
    background: url(http://orig03.deviantart.net/9b11/f/2008/101/c/5/war_skull_16x16__by_xicidal.gif);
   background-repeat: no-repeat;
}

Answer №2

Here is the solution you have been searching for. Feel free to customize the images as needed:

span {
  margin-right: 10px;
}
input[type="checkbox"] +
 label span {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAABmCAMAAAAOARRQAAAAUVBMVEX///8zMzMwMDBEREQqKiotLS3s7OwnJydcXFxJSUkkJCRDQ0P19fVhYWGZmZnd3d1VVVWvr684ODjFxcWKiopvb2+7u7t1dXX5+flpaWnW1ta78F6SAAABiElEQVRoge2ay5aDIBBEG3kp+EDxmf//0JkMYJwzZpERe9W1Mwtuym6OiyqAg2rlx8lZdlHWTaNXNZxLzctghCyuUhgrpDDDMqszyjxJkQGxo4Sc5j+QdRtkPkaQHLb1N+XBdUYnSYXmjyPFV9mtBMnKH7xU4vgfLutwmKh2PyvfvUihDbP8kiwzWrxO5Gk+m04/sabt3qz7R+rahiWQ3uImD9GlcP27O/Wx6t7FQRTDz16rKXJ1mcVJUlfGlySn5z2dI0WUp7f2/1Jl9CO/7dRLeJAuq5enOhcciKUGlSbT56YA9Gk6CrwJZpps03+pboId42EM70y0+SkAbTx8hLhnOvtknup03DVwYTTmDgpAmEjhIHwrC3YPhgUTFuIy2HswNq5xwvB7MJwwhCEMYQhDGMIQhjCEIQxhCEMYwhCGMIQhDGEIQxjCEAYPc3ewghQTIYVeSBEeUiCJFK8ihcVI0TdSkI9VS0AqWWBVRrAKMEh1HqxyElbVCqs4Bkg1OMAq9cGdFcUvpGkd5VrzEsoAAAAASUVORK5CYII=');
    background-size: 20px;
    height: 17px;
    width: 17px;
    display: inline-block;
    vertical-align: middle;
    margin-top: -5px;
}
input[type="checkbox"]:checked + label span {
    background: transparent;
}
input[type="checkbox"]:checked + label span::before {
    content: "";
    background-image: url('https://cdn4.iconfinder.com/data/icons/customicondesignoffice2/128/success.png');
    background-size: 20px;
    height: 17px;
    width: 17px;
    display: inline-block;
}
input[type="checkbox"] {
    display: none;
}
<input tabindex="0" id="gwt-uid-3" type="checkbox" value="on">
<label for="gwt-uid-3"><span></span>Run task immediately after finish</label>

Answer №3

CSS :

input[type="checkbox"]+label {
    display: inline-block;
    width: auto;
    height: 16px;
    background: url(images/custom_html_elements_sprite.png) 0 0;
}

input[type="checkbox"]:checked+label {
    display: inline-block;
    width: auto;
    height: 16px;

    background: url(images/custom_html_elements_sprite.png) -64px 0;
}

Are you sure about the width being set to 16px? Keeping it auto might be the solution to your issue.

Take a look at this link to the fiddle for more information.

Answer №4

Text has been formatted to fit a specific width.

To adjust the layout, simply remove the width and include padding-left as needed. Be sure to use no-repeat for your background image. Check out the updated fiddle

Note: You can resize the background image by using background-size

Example

input[type="checkbox"] {
  visibility: hidden;
}
input[type="checkbox"]+label {
  cursor: pointer;
  padding-left: 20px;
  display: inline-block;
  height: 16px;
  background: url(https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/ok_16x16.gif) no-repeat;
}
input[type="checkbox"]:checked+label {
  padding-left: 20px;
  display: inline-block;
  height: 16px;
  /* background: transparent; */
  background: url(http://orig03.deviantart.net/9b11/f/2008/101/c/5/war_skull_16x16__by_xicidal.gif) no-repeat;
}
<span class="gwt-CheckBox" id="i294">
<input tabindex="0" id="gwt-uid-3" type="checkbox" value="on">
<label for="gwt-uid-3">Run task immediately after finish</label>
</span>

Answer №5

To enhance your label, add a padding of 20px to the left and remove the width and height attributes from it. Additionally, ensure that your background image is set to no-repeat.

input[type="checkbox"]+label {
    display: inline-block;       
    background: url(images/custom_html_elements_sprite.png) 0 0 no-repeat;
    padding-left:20px;
}
input[type="checkbox"]:checked+label {
    display: inline-block;
    background: url(images/custom_html_elements_sprite.png) -64px 0 no-repeat;
}

See the updated version on this fiddle: https://jsfiddle.net/2j0zke2z/2/

Answer №6

Updated Version: Does this meet your requirements?

input[type="checkbox"] {
    visibility: hidden;

}
input[type="checkbox"]+label {
    display: inline-block;
    background: url(https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/ok_16x16.gif) 0 0;
   background-repeat:no-repeat;
  padding-left:25px;
}

input[type="checkbox"]:checked+label {
    display: inline-block;
    background: url(http://orig03.deviantart.net/9b11/f/2008/101/c/5/war_skull_16x16__by_xicidal.gif) 0px 0px;
  background-repeat:no-repeat;
   padding-left:25px;
}
<span class="gwt-CheckBox" id="i294">
<input tabindex="0" id="gwt-uid-3" type="checkbox" value="on">
<label for="gwt-uid-3">Run task immediately after finish</label>
</span>

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 am looking to create a div that can consistently refresh on its own without needing to refresh

I have implemented a comment system using ajax that is functioning well. I am looking to incorporate an ajax/js code to automatically refresh my "time ago" div every 5 seconds so that the time updates while users are viewing the same post. Important note: ...

javascriptcssajax

Save the user input to a dedicated text file

I am working with a couple of select tags that generate an array. Previously, I was only logging the array to the console upon pressing the SUBMIT button, but now I want to save it to a separate text file. Here is my main.html code: <form method="POS ...

javascripthtml

"Enhance User Experience with the jQuery/JavaScript Table Pagination

I have searched extensively for a jQuery/JavaScript table pagination solution. While I found some options, they were too complex for my needs. I am looking for a simple jQuery plugin to assist with paginating an HTML table. Datatables is more than what I ...

jqueryhtmljquery-pagination

Identifying Flash content in a unique way

In my dynamic page (let's call it myFlashContainer.jsp), the Flash content changes based on the link that is clicked. The code responsible for rendering the Flash looks like this: <object height="100%" align="l" width="100%" id="player" codebase= ...

javascripthtmljspflash

CSS - What's the source of this mysterious whitespace?

I'm currently making adjustments to a Wordpress website that is designed to be responsive. The site uses media queries to adapt its display based on the user's screen size, and everything looks great except for when the screen width is at its sma ...

htmlcss

How about this: "Using jQuery, we detached the element with the class 'myClass', then cloned it. But wait, where did my nested table go?"

I'm facing an issue where I have a div containing a table that I want to reuse for multiple entries in a JSON database. <div class="myButton"> <table> <tr id="currentVersion"> ...

jqueryhtmlclone

Is it possible to assign a predetermined text content to a table cell using a CSS class?

I attempted the following: <style type="text/css"> td.orange : before { background: #DD5F15; content : "TRIPLE";} </style> However, it seems that the content is being added after the closing "td" tag, which is causing it not to display. E ...

htmlcsshtml-table

React error due to setting div scroll height on component mount

In my code, there is a special div/container that contains multiple <p/> tags. The container has a reference called divRef, which is initially set to null using the useRef function. <div ref={divRef} style={styles.messageListContainer}> ...

javascriptcssreactjs

What is the best way to reset an HTML file input using JavaScript?

Looking for a way to reset the file input in my form. I've tried setting the sources to the same method, but it doesn't delete the selected file path. Important: Trying to find a solution without having to reload the page, reset the form, or us ...

javascripthtmlinput-type-file

Guide: Writing code that caters to different types of media in React using Material-UI

After reviewing the documentation, I believed that the optimal solution in later versions of material-ui was to use useMediaQuery, but unfortunately, I am unable to implement it correctly. My objective is to hide a menu when the page is being printed, so I ...

cssreactjsmaterial-ui

Angular is unable to iterate through a collection of ElementRef instances

My list of ElementRef contains all my inputs, but adding listeners to them seems to indicate that textInputs is empty even though it's not. @ViewChildren('text_input') textInputs!: QueryList<ElementRef>; ngAfterViewInit(): void { ...

htmlangulartypescriptelementref

Troubleshooting: SVG Icon Fails to Appear in Bright Theme Due to CSS

My HTML is structured like this. <h2 class="mt-10 scroll-m-20 border-b pb-1 text-3xl font-semibold tracking-tight first:mt-0" id="know-your-life"> <a aria-hidden="true" tabindex="-1" href="#know-your- ...

csstailwind-cssshadcnui

What is the best way to include an active CSS class in a menu item?

Link to example Can you figure out why the Home button is not turning red in this code snippet? .navbar a:hover, .navbar a:focus, .navbar a:active { color: red !important; } <nav class="navbar navbar-expand-lg"> <div class="collapse navbar ...

htmlcsstwitter-bootstrap

The rotation of an image in Microsoft Edge results in an HTML file display

One of the images on my website is sourced like this: <p> <img src="images/image.jpg" style="width: 50%;" /> </p> Surprisingly, in Chrome and Firefox, the image looks fine (just how I uploaded it to the server). H ...

htmlcssimageorientation

Are my Angular CLI animations not working due to a version compatibility issue?

I've been working on a project that had Angular set up when I started. However, the animations are not functioning correctly. The mat input placeholder doesn't disappear when typing, and the mat-select drop-down is not working. Here is my packag ...

htmlcssangulartypescriptanimation

jQuery's draggable and resizable functionality with containment provisions is designed to

I'm struggling to create a resizable and draggable div using jQuery, but it's proving to be quite buggy in its implementation. Despite finding similar questions, I haven't come across a solution yet. How can I fix the containment bug when ...

javascriptjquerycssjquery-ui

Sibling proximity: an excess of elements separating the regulations

Is there a way to make a hidden p element appear when hovering over the first visible element in a tree structure? I found some help on Stack Overflow suggesting the use of adjacent sibling selectors, and while it works well with a simple example, it fails ...

htmlcsshoverhidesiblings

What is the process for clicking a button in Selenium Python that lacks a "select" tag and only becomes clickable after fulfilling certain conditions?

Currently, I am working on automating the process of downloading files. To locate these files, I need to interact with two dropdown menus: one named 'Select Period' where I choose a date, and the other named 'Select File Type' where I s ...

pythonhtmlselenium-webdriverautomationwebdriver

Is there a way to change the button design within the CSS code of Mailchimp's embed feature?

Struggling to customize the button style and positioning in Mailchimp's embed CSS: <!-- Begin Mailchimp Signup Form --> <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/c ...

htmlcsswordpressembedmailchimp

`javascript pop up notification will only display one time`

I am currently developing a chrome extension with two different modes. When the user clicks on the icon, a pop-up message should appear to indicate which mode is active. However, I am facing an issue where the message does not always display when the pop- ...

javascripthtmlgoogle-chrome-extensionpopup