One of the features on my website is the ability to choose from various colors, and I would like for the selected color to be highlighted.
Shown below is an image depicting the current state:
I would like to transform it to look like this:
Thank you in advance for your time and suggestions!
If you want to customize the appearance of radio buttons, you can modify the styles for both the checked and unchecked states by using CSS selectors like
[input-selector]:checked + label:after[input-selector]:not(:checked) + label:before[type="radio"]:checked,
[type="radio"]:not(:checked) {
position: absolute;
left: -9999px;
}
/* Additional CSS styling for radio buttons */
[type="radio"]:checked+label,
[type="radio"]:not(:checked)+label {
/* Styles go here */
}
/* More CSS styling for radio buttons */
/* To change the background color, only update the code below*/
.red-input:not(:checked)+label:before {
background: red;
}
/* More customizations for different colors */
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<form class="form-inline m-5">
<div class="form-group">
<div class="mx-2">
<input type="radio" id="test1" name="radio-group" class="red-input">
<label for="test1">Option 1</label>
</div>
<div class="mx-2">
<input type="radio" id="test2" name="radio-group" class="green-input">
<label for="test2">Option 2</label>
</div>
<div class="mx-2">
<input type="radio" id="test3" name="radio-group" class="black-input">
<label for="test3">Option 3</label>
</div>
<div class="mx-2">
<input type="radio" id="test4" name="radio-group" class="silver-input">
<label for="test4">Option 4</label>
</div>
</div>
</form>For more examples and demos, check this CodePen link.
To apply a default background color for the inputs, utilize the selector
[input-selector]:not(:checked)+label:before.red-input:not(:checked)+label:before {
background: red;
}In the form I created, there is a dropdown logo selection at the bottom. The options in the dropdown are populated from folders in the root directory using the following code: $dirs = glob('*', GLOB_ONLYDIR); Each of these directories contain ...
I am trying to create a basic card using bootstrap 4 with the following HTML code. My goal is to change the style of the card when it is clicked, but not when the buttons inside the card are clicked. Currently, clicking on the test1 button triggers both ...
The variable abc is pointing to an object. What distinguishes abc.p = undefined from delete abc.p aside from their return values? ...
I'm a beginner in Material Design and I could use some assistance with the following structure. Can anyone guide me on how to create this? https://i.stack.imgur.com/NpiVz.png I've managed to add a text box, but now I'd like to place a label ...
After extensively searching for a solution to the issue plaguing my website, I found that there was always an annoying gap at the top of the page. Despite trying various solutions, none seemed to work. Upon inspecting the website in Firefox, I discovered t ...
I am experiencing an issue with making my display responsive. I have two sets of navigation menus - one is displayed and the other is hidden on page load. However, when the screen size is 480px or below, the main site nav menu is hidden as expected but the ...
[![enter image description here][1]][1]I am working with AngularJS and I have multiple arrays named list1, list2, and list3. Each array is used in a different list. Within my application, there are two buttons and two divs - the left div displays elements ...
Having trouble with aligning the left text and custom styled button to the right and top of the checkout button, despite using various codes like float:right, margin-left, position relative/absolute. Shifting the button also didn't work, so now consid ...
While attempting to create a slider with dots, I encountered an issue where the dots appeared as ellipses instead of circles, despite setting the width and height to be the same. For instance, I specified width: 12px; height: 12px; but it resulted in a sha ...
I am having some issues with integrating DataTables into Django 2.1. The table appears to be broken, and I am struggling to correctly map the data being sent by the server to JavaScript. https://i.sstatic.net/qv8kl.jpg Here is the JavaScript configuratio ...
As a beginner in Vuejs, I am trying to figure out how to incorporate multiple templates into one application. For example, I want to use the Flatkit template for my SignIn page and a different template (Dashboard) for the Admin dashboard. How can I integra ...
Is there a way to configure csslint in Atom to exclude "ids" and prevent the warning "Don't use IDs in selectors" from appearing? Update: Despite my question being flagged as potentially duplicate, I delved deeper in my own research and ultimately fo ...
I have a calculator feature on my website which was coded in php. At the end of this calculator, there is a section that displays the results. While the results div works properly on desktop, I am looking to implement a fix for mobile devices. Specificall ...
I'm attempting to implement the popover element sample code from the getbootstrap site. System Setup: Angular 8.0.0 JQuery 3.4.1 Popper.js 1.15.0 Bootstrap 4.3.1 ToolTip 1.6.1 In my angular.json file, I have included the necessary scripts "scripts ...
Check out a CodePen I created to demonstrate the issue. It would be easiest if you could take a look at it here. I am trying to figure out a way to include pseudo elements before and after a heading to display a 1px height line that extends from the sides ...
I'm having trouble getting checkboxes to display on a form for users to choose workshops. I am using the Materialize CSS gem with Rails. Here is my form: <div class="row"> <% workshops = Workshop.all.order("date") %> <% workshops. ...
My challenge is to create a centered div on the page that resizes with the viewport while maintaining an aspect ratio of 16:9. However, I also need the font and content inside the div to scale proportionally as it resizes. Using vmin works well in most cas ...
I'm facing some difficulties implementing wow.js into my HTML code. Could it be due to missing script loads or incorrect script loading? Is there a chance I'm not initializing wow.js properly? Although the nav part won't be utilizing animati ...
For my personal project, I am working on creating a Google Docs clone using Quill and NextJS. As part of this project, I want to have thumbnails for all the documents displayed, similar to Google Docs. I initially tried displaying the first 100 characters ...
I am attempting to add a popup window feature to my project in order to simulate a pop-up window where I can later incorporate content from other pages within my application. The code I currently have is as follows: html <div id="box"> <div ...