Is it possible to change the color of a label without using javascript when the associated checkbox is checked?
Is it possible to change the color of a label without using javascript when the associated checkbox is checked?
Utilize the adjacent sibling combinator:
.check-with-label:checked + .label-for-check {
font-weight: bold;
}<div>
<input type="checkbox" class="check-with-label" id="idinput" />
<label class="label-for-check" for="idinput">My Label</label>
</div>I really appreciate Andrew's idea, and it reminds me that the CSS rule can be simplified to just:
:checked + label {
font-weight: bold;
}
I prefer leveraging the implicit connection between the label and the input element, so my approach would look like this:
<label>
<input type="checkbox"/>
<span>Hello</span>
</label>
and using CSS:
:checked + span {
font-weight: bold;
}
You can see an example here: http://jsfiddle.net/example123/
Here is a demonstration of how the :checked pseudo-class can enhance the accessibility of forms. By using the :checked pseudo-class with hidden inputs and visible labels, you can create interactive elements like image galleries. I have provided this code snippet for those interested in testing it out.
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #0964aa;
font-style: normal;
} <input type="checkbox" id="cb_name" name="cb_name">
<label for="cb_name">CSS is Awesome</label> Here is a snippet to modify the text color of a checkbox label to green when it is selected:
input[type=checkbox]:checked +label{
color: green;
}<input type="checkbox" id="yes" />
<label for="yes">Yes</label>In this code, the input and label elements are considered adjacent siblings. The selector "+" signifies the sibling relationship between them. Additionally, the ":checked" pseudo-class in CSS specifies a special state of the selected element(s), in this case, the checked state is targeted.
Using CSS alone won't suffice for this task. You can achieve it with the help of jQuery instead.
HTML
<label id="lab">Checkbox</label>
<input id="check" type="checkbox" />
CSS
.highlight{
background:yellow;
}
jQuery
$('#check').click(function(){
$('#lab').toggleClass('highlight')
})
This functionality is compatible with all browsers.
I have a JSP page where I dynamically add rows to a table using a different Javascript function than in my previous query. While I can add elements to the table columns, I'm unable to apply a style class that is defined in a CSS file. Here is my Java ...
I'm working on a project that requires users to make specific selections in dropdown menus that are interconnected. Does anyone know how to set up a form so that the options in dropdown menu #2 change based on what the user selects in dropdown menu #1 ...
I have a section where I need to include two buttons. One button on the left labeled "Sunday" and one on the right labeled "misc". I want the two buttons to be evenly placed within the area, so I assigned them the same class since they are the same size. ...
I am attempting to create a design that expands to fill the screen, but allows for scrolling when the content exceeds the available space. My current approach using basic flexbox, as suggested in this answer, successfully fills the screen. However, overfl ...
Currently facing a perplexing issue while developing a website using aspx.net and c#. The following code snippet is on my masterpage: protected void Page_Load(object sender, EventArgs e) { if (HttpContext.Current.Request.Url.AbsolutePath == "/ ...
Recently, I encountered an issue on my website and found a solution by creating two separate HTML pages. However, when I modified the urls.py to differentiate the URLs for these pages, the CSS stopped working. Below is my code snippet and a detailed explan ...
I've been working with flex for a while now, but I'm struggling to vertically align the content of my navbar to the center in the code. <nav className="nav navbar"> <h3> Logo </h3> <ul className= &q ...
Despite my best efforts, I keep encountering this persistent error on Heroku whenever I attempt to serve a static HTML page with some basic JS, images, and CSS. I diligently followed all the advice from SO, made adjustments to index.js, restructured files, ...
Currently, I am in the process of designing a straightforward two-column layout. This layout will consist of one prominent image at the top followed by two columns underneath - one for images and the other for text. https://i.sstatic.net/sYphQ.png Howeve ...
Here is the code I am working with: Javascript: $(document).ready(function() { $('#example').DataTable( { "ajax": '../ajax/data/arrays.txt' } ); } ); HTML <select id="office-select" name="idOffice"> <op ...
Hey everyone, I'm having some trouble with the currency filter in Angular. It's not working and just displaying a blank space. I'm new to learning Angular so any help would be greatly appreciated! Here is the code I'm using: <!DOCT ...
Checking if a string is an HTML tag can be tricky. I've tried various methods found on Google, but none have been successful so far: var v = $(string).html() ? 1 : 0; --or---------------------------------------------- var htmlExpr = new RegExp("/^( ...
My current issue involves customizing Joomla article content using a module. I am attempting to hide a div until a user clicks on an input, such as a radio button labeled Test1. Once Test1 is selected, another hidden field within the div should display the ...
Here is a sample code using a while loop: while($fetch = $stm->fetchAll()) { echo '<tr class=""'>; echo '<td>' . $fetch['name'] . '</td>'; echo '</tr>'; } I want to ...
I have developed a system that allows me to load image files from HTML. However, after selecting a file and loading it from the front end, I am in need of a Python API to read the selected image file. How can I establish a connection between Python and HTM ...
Just starting out with bootstrap and encountered an issue I have two different classes for the navbar-header, one I want on the left and the other on the right. I need both to be responsive. <nav class="navbar navbar-default navbar-fixed-top topnav " ...
Currently facing a challenge with a significant amount of code here. It is referenced as follows: "ng-uikit-pro-standard": "file:ng-uikit-pro-standard-8.3.0.tgz", I am attempting to display a tab between 1 and 3 if a certain condition ...
I'm currently exploring the creation process of the front-end page for WhatsApp Web, specifically focusing on the list of contacts located on the left side (<div id="pane-side">). The contact names within this list are identified by the class "e ...
When a button is clicked, I want to iterate through a group of absolutely positioned children divs with varying z-indexes. The goal is for the z-index of the currently visible div to decrease on each click, creating a looping effect where only one div is v ...
I created an Azure function using C# that generates HTML content. However, when I access it from a web browser, the response is displayed as plain text instead of rendering as HTML. After some research, it seems like I need to define the ContentType header ...