Transform radio inputs into buttons when they are enclosed within a label element

This is my HTML code:

<div class="product-addon product-addon-extra-tip">
    <p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-0">
        <label><input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="2">2</label>
    </p>
    <p class="form-row form-row-wide addon-wrap-2004-extra-donation-to-trafficking-survivors-0-1">
        <label><input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="5">5</label>
    </p>
</div>

I am attempting to customize the appearance of these radio inputs to mimic buttons. I have made progress, but I am stuck on how to differentiate the :checked option from the rest.

You can view where I am facing difficulties in the jsfiddle link provided below. Do you think it's achievable?

http://jsfiddle.net/2gdotu21/1/

cssinputradio-buttonlabel

Answer №1

By utilizing CSS, you can style input elements differently based on whether they are checked or not in relation to their labels.

For more information, refer to: https://www.w3.org/wiki/HTML/Elements/label & also check out https://www.w3.org/TR/WCAG20-TECHS/H44.html

label {/* apply your style for unchecked button*/
  color:red
    }
label:before {/* apply your style for checked button*/
  content:'$';
  font-size:1rem;
}
input:checked + label {
  color:green;
  }
[type=radio]{ /* hide it ? use any method but include display:none;*/
  position:absolute;
  right:200%;
  }
<input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="2" id="addon-2004-extra-tip-0[]" />
<label for="addon-2004-extra-tip-0[]">2</label>
<input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="2" id="addon-2004-extra-tip-0[1]" />
<label for="addon-2004-extra-tip-0[1]">300</label>
<input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="2" id="addon-2004-extra-tip-0[2]" />
<label for="addon-2004-extra-tip-0[2]">14</label>
<!-- same name to allow only one checked in this demo -->

Alternatively, you can incorporate radio buttons within a button design like the one at http://codepen.io/gc-nomade/pen/LketK (old-fashioned glassy button).

Here is an example of code to change background color:

.product-addon-extra-tip label {
  float: left;
  width: auto;
  min-width: 60px;
  margin: 3px;
  border-radius: 4px;
  border: 1px solid #D0D0D0;
  overflow: auto;
  color: black;
  font-size: 1.2rem;
  text-align: center;
  padding: 5px 0;
  display: block;
  line-height: 1.3rem;
}

.product-addon-extra-tip label input {}

.product-addon-extra-tip label:before {
  content: '$';
}

label {
  position: relative;
}

input {
  position: absolute;
  top: -15px;
  z-index: -1;
  box-shadow: 0 0 0 200px tomato;
}

input:checked {
  box-shadow: 0 0 0 200px green;
}
<div class="product-addon product-addon-extra-tip">
  <p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-0">
    <label><input type="radio" class="addon addon-radio" name="addon-2004-extra-tip-0[]" data-raw-price="0" data-price="" value="2"> 2 </label>
  </p>
  <p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-1">
    <label><input type="radio" class="addon addon-radio" name="addon-2004-extra-tip-0[]" data-raw-price="0" data-price="" value="5"> 5 </label>
  </p>
</div>

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

How to position a textarea alongside a checkbox using CSS with Bootstrap

I'm having an issue aligning a text area next to a checkbox in my Bootstrap HTML. Here's the code snippet: <div class="form-group row"> <div class="col-12 form-check"> <label class="col-3 col-form-label" for="check15"& ...

htmlcsstwitter-bootstrapbootstrap-4

Take out the gutter spacing between card columns in Bootstrap 4

Is there a way to eliminate the spacing between rows and columns in Bootstrap 4's .card-columns container? ...

csstwitter-bootstraptwitter-bootstrap-4bootstrap-4

Encountering problems with Node Sass versions while trying to import custom scss files into app.js

I've encountered several articles on stack that didn't quite solve my issues. The problem arose when I tried to import a custom SCSS file into my React app.js to override bootstrap theme colors. Here are the style imports in my App.js: import &q ...

cssnode.jsreactjssassnode-sass

Encountering yet another frustrating issue with z-index not functioning properly in versions of IE above 7, despite extensive research yielding no solution

I have scoured numerous resources and read countless articles on how to resolve z-index issues in IE 7, 8, and 9. However, none of the suggested solutions seem to work for my particular situation. The issue at hand is that I have interactive content posit ...

javascripthtmlcssinternet-explorerz-index

Building a concealed navigation bar using HTML and Typescript that appears when you start scrolling - here's how!

Seeking guidance on creating a hidden navbar that becomes visible as you scroll the page, using TypeScript. Can anyone provide assistance? <nav class="navbar navbar-expand-lg navbar-dark pb_navbar pb_scrolled-light w3-animate-right navlist-right ...

htmlcssangulartypescripttwitter-bootstrap

Styling the large drop-down menu for Internet Explorer 7

Check out the code snippet at http://jsfiddle.net/jN5G4/1/ Is there a way to align the drop-down menu for "5 Columns" to match the alignment of the other drop-downs? After removing the <a href...> </a> tags from the 5 Columns list item, the d ...

htmlcssinternet-explorerinternet-explorer-7cross-browser

CSS deep level selectors

For the following HTML/CSS code, I am trying to target only level 1 "row" elements and not their nested counterparts. However, when using the child selector, it still selects the nested elements. How can I achieve selecting only level 1 "row" elements? ...

htmlcsscss-selectors

The jQuery ellipsis extension is incompatible with the "max-height" property

Is it possible to use this plugin with the "max-height" css property? Currently, it only works with a specific height defined but not with max-height. Is there a way to make it compatible with max-height as well? (function($) { $.fn.ellipsis = f ...

jquerypluginsellipsiscss

Tips for ensuring the final row remains fixed at the bottom of the table while maintaining a minimal body height:

I'm currently working on designing an invoice table using HTML and CSS. I have dynamic rows that are added to the table, and I want the body of the table to have a minimum height to fit around 5-6 rows, after which it should extend based on the number ...

htmlcssbootstrap-5

Automatically conceal a div or flash message after a short period of time by utilizing CSS3 in a React

I am relatively new to the React environment and recently created a basic component for a bookmarking feature. Essentially, when the favourite icon is clicked, an ajax call is sent > a record is created in the database > on ajax success, a flash me ...

javascriptajaxcssreactjs

Expanding Vue Tabs with Bootstrap: Manipulating tab-content to perfectly fill parent height

On my webpage, I have implemented a tabs component called b-tabs. This component is enclosed within a parent div with a specific height. I am trying to make the content of the tabs take up the full remaining height of the parent component. https://i.ssta ...

cssvue.jsbootstrap-4bootstrap-vue

Conceal scroll bar within web browser view

Is there a way to remove the scrollbar on Android Chrome/Chromium by utilizing CSS or Javascript? I attempted: document.documentElement.style.overflow = 'hidden'; Although this solution works for Chrome on Windows, it doesn't have any eff ...

javascriptandroidcssandroid-webview

What are some ways to create a responsive image design?

Currently, I am using the code below to enlarge an image when clicked on. I have attempted using media queries in CSS... I have also added another class in #modalPopupHtml# to adjust the size of the large image: .imgsize{ height: 600px; width: 800px; ...

javascriptjquerycssresponsive-designresponsive

Differences in tabstrip appearance between FireFox on Mac and Ubuntu compared to FireFox on PC

I've encountered an issue with my simple css tabstrip. It seems to render correctly in: Safari 5.0.2 on Mac IE8 on PC FireFox 3.8.12 on PC However, when viewed on FireFox 3.8.12 on Mac and Ubuntu, the tabs overlap the bottom border of the containe ...

cssfirefoxplatform-specific

Using the identical code, Wicked PDF generates distinct reports on separate computers

While utilizing Ruby on Rails to render a PDF using WickedPDF and sending it via email, I encountered an unexpected issue. The same code is present on two separate computers, both with up-to-date versions synced from GitHub. However, the generated PDF repo ...

htmlcssruby-on-railswicked-pdf

Using HTML5, the <section> element can inherit styling from the

This is my first time building a website using HTML5 and I've come across a small problem. Here is the code snippet: <header></header> <section> <header></header> <article></article> <footer></foot ...

htmlcss

The appearance of a printed webpage does not match what is shown in Google Chrome's Print Preview feature

I have encountered a strange issue that has me stumped. I need the webpage in my current project to be completely printable, but I'm facing difficulties. While the signature field and note field (with the text "erererer") display perfectly in Google C ...

cssgoogle-chromeprinting

What is the order in which an HTML page loads?

Can you explain the sequence in which an HTML page loads? Below is a basic HTML outline: <html> <head> <link rel="stylesheet" href="css/sheet1.css"> <link rel="stylesheet" href="css/sheet2.css" <script src="scripts/take ...

javascripthtmlcss

How to create a stunning pixel pattern overlay on a website section

I've been exploring how to add a pixel pattern overlay onto a website section similar to what's done on this site: (over the background video image at the top and the image in the bottom section). I'm sure it's a simple process, I jus ...

csswordpress

Enhance the user experience by implementing a smooth transition effect when loading new pages

Recently, I've been exploring a method to load content from an external HTML file using AJAX on my website. While it's working well, I'm now interested in adding a page transition effect when the content changes. Specifically, I'd like ...

javascriptjqueryhtmlcssajax