Move the label of the radio button to a different position within the image

I'm having trouble adjusting the label position for my radio buttons. Can you help me with this issue? Here is my code:

<style>
input[type=radio]:not(old){
width   : 50px;
 margin  : 0;
 padding : 0;
 opacity : 0;
}

input[type=radio]:not(old) + label{
 display      : inline-block;
padding-left : 63px;
background   : url('radio.png') no-repeat 0 0;
line-height  : 25px;
}

input[type=radio]:not(old):checked + label{
  background-position : 0 -24px;
}

html:

<input id="radio1" type="radio" name="radio" value="1" onclick="javascript:yesnoCheck();" checked="checked"><label for="radio1">Now </label>

 
    <input id="radio2" type="radio" name="radio" onclick="javascript:yesnoCheck();"  value="2"><label for="radio2">Later</label>

Please refer to the image link provided, as I need assistance moving the labels to the left side.

https://i.sstatic.net/RZaUS.png

Answer №1

Checkboxes in HTML:

<input id="checkbox1" type="checkbox" name="checkbox" value="1" onclick="javascript:yesnoCheck();" checked="checked"><label for="checkbox1">Yes </label>


    <input id="checkbox2" type="checkbox" name="checkbox" onclick="javascript:yesnoCheck();"  value="2"><label for="checkbox2">No</label>

CSS for Styling Checkboxes:

input[type=checkbox]:not(old){
width   : 50px;
 margin  : 0;
 padding : 0;
 opacity : 0;
}


input[type=checkbox]:not(old) + label{
 display      : inline-block;
padding-left : 63px;
line-height  : 25px;
  position: relative;
}

input[type=checkbox]:not(old) + label:after{
  content: '';
  position: absolute;
  top: 0;
  left: 23px;
  width: 100%;
  height: 100%;
  z-index: -1;
  background   : url('checkbox.png') no-repeat 0 0;
}

input[type=checkbox]:not(old):checked + label{
  background-position : 0 -24px;
}

Do you find this information helpful?

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

Unable to post form data into database due to Javascript undefined data situation

I've been working on an HTML form that can interact with a PHP API to retrieve client data and then update user stats in a MySQL database. Currently, I am converting the data into a JSON object and using JSON.stringify to create a string for sending ...

Exploring New Heights: Angular 7 - Elevating Sidebar and Element Z-Index

I am currently facing an issue in my Angular 7 web app where I need to adjust the z-index of the sidebar. The ng-sidebar plugin sets the default z-index to 9999999, but I am using jqwidget dropdown boxes within the sidebar which have a default z-index of 2 ...

What is the significance of $() in jQuery?

I understand that $() is a selector, but I find it puzzling as to what it actually selects since there is nothing inside the parentheses. Is this a common practice or frowned upon in coding conventions? An example of where I have seen it used is when maki ...

allowing absolutely positioned region to expand

For further information, please visit this page: test page In the process of designing a website, I have implemented a sidebar featuring an accordion style vertical navigation bar. The sidebar is set to be absolutely positioned in relation to its containi ...

Custom AngularJS directive fails to reflect changes in model after selecting a file

I recently created a custom directive called ng-file-chosen, which is supposed to capture the selected file name from an <input> element and bind it to the ng-model passed in. In the code snippet below, the result of ng-file-chosen is linked to mode ...

Shifting the background image as we reach its limit

I'm creating a website for my company, but I struggle with HTML. One feature I want is to have a background image that stays static while reading the site, but then follows the user when they reach the end of the image. I know how to make an image f ...

Do not decode HTML content within an iframe; instead, extract the data directly from the HTML source

To expedite execution time, we have made the decision to not display the table in the iframe as it is invisible to the client. However, we still need to update the main page table by copying its contents. The approach we are taking is that the iframe shou ...

Display/Conceal content with JQuery on a PHP webpage

I am having trouble with the following code. My intention is to show/hide the content between the #info id when clicking buttons, but nothing seems to be happening. Could you help me identify the issue? echo '<script> $( "#show' . $r ...

What is the best way to retrieve the ids of child divs that are directly beneath a single parent div?

If I have a structure like the one below, I am looking to access each individual div inside its parent div and print its id using a for loop. <div class=abc> <div id="parent"> <div id="one"> <div id=........</div> ...

What is the best way to embed sections of one HTML page into another page?

Is there a method I can use to embed sections of one webpage within another webpage? The dilemma arises from the fact that the second page has a distinct style compared to my main page. Is it feasible to apply the alternate style solely to specific content ...

What is the method for obtaining the CSS text content from an external stylesheet?

I've spent countless hours trying to achieve the desired results, but unfortunately, I haven't been successful. Below is a summary of my efforts so far. Any helpful tips or suggestions would be greatly appreciated. Thank you in advance. Upon rec ...

Display a pop-up when hovering over a layer with react-leaflet

I am attempting to display a popup when hovering over a layer in react leaflet. Utilizing GeoJson to render all layers on the map and onEachFeature() to trigger the popup on hover, I encountered an issue where the popup only appeared upon click, not hover. ...

How can you locate the position of a selector within a parent or set using jQuery

Could someone please help me determine the position of the current selector within its parent using jQuery? I need this information in order to effectively use the .insertAfter() and .insertBefore() methods to rearrange elements within their nested structu ...

What is the best way to make my text scroll horizontally if the container is not wide enough?

Instead of overwhelming you with code, I'll just share a link to the types of animations I've come across so far. Although these options are close to what I'm looking for, none of them are exactly right. The one that comes closest to my vis ...

Creating visually appealing Jquery-ui tab designs

Trying to customize the jquery tabs, I experimented with styling them to my liking. One thing I did was attempt to reduce the size of the tabs by adding a height:45px; to the UI stylesheet shown below. .ui-tabs-vertical .ui-tabs-nav li { clear: left; ...

Display the page number when printing using CSS

I am struggling to display the page number at the bottom of my printable document. I followed a source on Stack Overflow, but unfortunately, it did not work for me. My current CSS attempt to achieve this is as follows: body { text-align: justify; } /* ...

Are HTML entities ineffective in innerHTML in javascript?

Take this example: <script type="text/javascript> function showText() { var text = document.getElementById("text-input").value; document.getElementById("display").innerHTML = text; } </script> <?php $text = "<html>some ...

The tab content appears to be hidden or not displaying properly

I'm currently working on a project involving tabs that display content for two different data-targets (which is not an issue). I've implemented a script that automatically switches tabs every 5 seconds. The tab changes successfully, but the tab-c ...

AngularJS issue: Form submission does not trigger the controller function

I am currently learning AngularJS and I am experimenting with the sample code below to send my form data to the server. <!doctype html> <html lang=''> <head> <meta charset="utf-8"> <script src="../js/angular.min.v1 ...

Is it possible to alter the color of a parent's pseudo-element when it is focused using CSS3?

This situation is quite challenging, and I believe achieving it with plain CSS3 alone is difficult (easier with jQuery, but I'm trying to avoid that). Are there any potential workarounds or hacks? My main goal is for it to be cross-browser compatible ...