The radio button default selection is checked, but the desired styles are not being applied

My webpage features two radio buttons, "No" and "Yes," with the default selection being "No." I have implemented CSS styles for the checked elements, but they only work once physically selected. My goal is to apply these styles immediately on page load without requiring user interaction. Currently, I am facing difficulty in achieving this. Any assistance would be greatly appreciated.

HTML

<div class="split">
    <input id="contact-no" type="radio" name="contact" value="No" checked="checked">
    <label for="contact-no">No</label>
</div>
<div class="split">
  <input id="contact-yes" type="radio" name="contact" value="Yes">
  <label for="contact-yes">Yes</label>
</div>

CSS

.am-form input[type="radio"] + label:hover, .am-form input[type="radio"]:checked + label{background: rgb(239,58,65);}

Initial Page Load View: https://i.stack.imgur.com/Qel9t.png

Desired Page Load View and Selection Appearance: https://i.stack.imgur.com/xQI08.png

htmlcssradio-button

Answer №1

I encountered a situation where I had several hidden sections with identical names and IDs, prompting me to customize each one individually.

<div class="split">
  <input id="ns-contact-no" type="radio" name="ns_contact" value="No" checked="checked">
  <label for="ns-contact-no">No</label>
</div>
<div class="split">
    <input id="fs-contact-yes" type="radio" name="ns_contact" value="Yes">
    <label for="fs-contact-yes">Yes</label>
</div>

Further down the line and concealed:

<div class="split">
  <input id="bs-contact-no" type="radio" name="bs_contact" value="No" checked="checked">
  <label for="bs-contact-no">No</label>
</div>
<div class="split">
    <input id="bs-contact-yes" type="radio" name="bs_contact" value="Yes">
    <label for="bs-contact-yes">Yes</label>
</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

Unusual spacing issue observed between <div> elements on Internet Explorer, but not on Firefox or Opera

I am facing a common question that many others may have asked before, but I haven't been able to find a solution to my specific issue. When viewing my website on FF, Opera, and IE on Windows 7, everything displays correctly. However, when using IE7 o ...

htmlcssinternet-explorer

Console command to change paragraph tag color---Modifying the color

I am attempting to change the color of all paragraph tags on a webpage to white by utilizing the console. My initial attempt was: document.p.style.color = 'white'; However, this method did not have the desired effect. Interestingly, I have had s ...

javascripthtmlcss

Ways to conclude a running function

This script has been created by me: $(document).ready(function(){ $("div#tabs a").hover(function(){ rod = this.id $('div.tabber').hide(); $('#tabber_' + rod).fadeIn(); $("div#tabs a").removeClass("ta ...

jqueryhtmlmenutabsfadein

Utilizing Jquery to automatically scroll to a specific div on page load by setting an

I am attempting to automatically scroll to the div specified in the URL. The URL may include one of 21 different IDs such as: url.com/test#lite1 url.com/test#lite2 url.com/test#lite3 This scrolling action should happen when the page loads (so that user ...

javascriptjqueryhtmlcss

Implementing Pagination Functionality Using Knockout.js

Sample JSON Data [{ "name": "A Goofy Movie (1995) 720p HDTVRip x264 Eng Subs [Dual Audio] [Hindi DD 2.0 - English DD 2.0] Exclusive By -=!Dr.STAR!=-", "progress": 0, "size": "1.06 GB", "downloaded": "87.98 KB", "hash": "8fe65e43464debe ...

javascriptjqueryhtmljsonknockout.js

Background gradients in versions of Internet Explorer 8 or earlier

For my website, I'd like to incorporate gradient backgrounds specifically for Internet Explorer. I am aware of a proprietary method for achieving this: filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#20799d', EndColorStr= ...

htmlcssinternet-explorer

Exploring the concept of nested views in AngularJS's UI Router with multiple views integration

I am facing an issue with configuring multiple views on one page, where one view is nested within another. My code in app.js does not seem to be working properly. Below are the details: This is my index.html file <body ng-app="configuratorApp" > ...

javascripthtmlangularjsangular-ui-router

It is not possible to place the cursor before a non-contenteditable div within a contenteditable div

Here is the layout I am working with: <div contenteditable=true> /// <div contenteditable=false>not editable</div> /// </div> One problem I'm facing is that when the non-contenteditable div is the first element on a ...

htmlcss

I need help with importing CSS in Vue.js

When working with the Vue package, I have a need to import a CSS file directly into the index.html file. Currently, the 'index.html' file mounts #app > 'App.vue', which then mounts Todo.vue using the router. Any assistance on how t ...

cssvue.jsimportrouter

From HTML to Python CGI to communication with a Serial port

I am having an issue running a Python CGI script to send data to a serial port. Whenever I try to open and set the serial port to a variable, the HTML server crashes. Below is the code snippet that receives a color (red, blue, green) from the HTML page: ...

pythonhtmlcgipyserial

CSS creates gaps between each of the internal elements inside the HTML document

I'm looking to create a 4px space between all internal components within my HTML, regardless of direction (top, bottom, left, or right). I have attempted to achieve this by using an external CSS file with the following code: body { padding: 2p ...

htmlcss

Integrate SVG into the dropdown menu without duplicating the SVG element

I have an SVG of a right arrow: <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0V0z" fill="none"/> ...

htmlcss

Initiate animation on command with either Jquery or JavaScript

I have a special notification display box that showcases errors on my website .flash { height: 75px; position: fixed; top: 20px; right: 20px; z-index: 10; background-color: #ffffff; box-shadow: 0 0 30px 2px #dddddd; -webkit-animation: flas ...

javascriptjqueryhtml

Arranging titles on the top of the page in a column format, resembling an index

Has anyone figured out how to make the title of the content stick at the top, one below the other, as the user scrolls? I've been using Bootstrap's Scrollspy, which works fine, but I need a few additional features. You can check out the codepen l ...

javascriptjqueryhtmlcssscroll

I am currently encountering a glitch with my video VTT file, as the subtitles are not appearing on screen

welcome to the world of coding WEBVTT 00:01.000 --> 00:8.000 coding is my passion join me on this journey ...

html

The background image is not displaying correctly

I've been struggling to add a background to the menu section at the top of my webpage. I uploaded the image to www.ra3manifesto.co.nf and want the logo, h1, and menu bar to be placed on top of it. I attempted to set this background using the following ...

htmlcss

What is the method for creating a URL (link) that simulates entering text into a text box and then pressing a button?

There is a button on a 3rd party homepage that goes by the code: <INPUT class="widget-content" TYPE="TEXT" onchange="javascript:document.foo.submit();" NAME="RegExRef"> I am looking to automate the task of populating the text box and clicking the b ...

htmlurl

What's the best way to avoid global application of stylesheets imported for svelte carbon components?

My dilemma lies in wanting to utilize the DatePicker feature from carbon-components-svelte. Unfortunately, when I do so, the global application of styles from carbon-components ends up causing some conflicts with my own custom styles. As per the documenta ...

csssveltesveltekitcarbon-componentscarbon-components-svelte

The offset value was inconsistent in the desktop version of Firefox

Could you take a look at my code on the fiddle link, Here is the code snippet: <body> <div id="content" style="width:400px; height:110px;"> <svg id="circle" height="300" width="300"> <circle cx="150" cy="150" r="40" st ...

javascriptjqueryhtmlfirefoxsvg

How to Style Background with CSS on the Server-Side? (Including Links and Hover Effects)

I'm facing a dilemma in choosing between an ASP.NET control and an HTML element for creating a button with a CSS-defined background that changes on hover... 1. Initially, it seems the ASP.NET ImageButton control is not suitable for this purpose becau ...

asp.netcssbackgroundhoverserver-side