As someone new to web development, I am facing an issue with my code where the CSS id selector is not functioning as expected:
li {
border: 3px solid red;
}
h3 {
background: green;
}
#special {
color: green;
}<h3>Todo List</h3>
<ul>
<li> <input type="checkbox" name="walkRusty"> Walk Rusty</li>
<li> <input type="checkbox" name="buyGroceries">Buy Groceries</li>
<li> <input type="checkbox" name="cssVideos" id="special">Finish CSS Videos</li>
</ul>Reposition the id=special element inside the li tag.
li {
border: 3px solid red;
}
h3 {
background: green;
}
#special {
color: green;
}<h3>Todo List</h3>
<ul>
<li> <input type="checkbox" name="walkRusty"> Walk Rusty</li>
<li> <input type="checkbox" name="buyGroceries">Buy Groceries</li>
<li id="special"> <input type="checkbox" name="cssVideos" >Finish CSS Videos</li>
</ul>Ensure that your li element containing an input (checkbox) has the correct text you want to style with a specific ID. The text 'Finish CSS Videos' should be within the li tag itself. Make sure to assign the appropriate ID to the respective li tag as shown below:
<li id="special"> <input type="checkbox" name="cssVideos" >Finish CSS Videos</li>
To change the color of text in the checkbox, apply the id to the li element instead of the input. Additionally, it is recommended to use labels for inputs rather than directly placing text in the li.
li {
border: 3px solid red;
}
h3 {
background: green;
}
#special {
color: green;
}<h3>Todo List</h3>
<ul>
<li> <input type="checkbox" name="walkRusty"> Walk Rusty</li>
<li> <input type="checkbox" name="buyGroceries">Buy Groceries</li>
<li id="special"> <input type="checkbox" name="cssVideos" id="special">Finish CSS Videos</li>
</ul>Make sure to apply the #special tag not just on the input tag, but also on the text itself. If you want to style the text "Finish CSS Videos", you need to enclose it in another tag.
HTML
<ul>
<li> <input type="checkbox" name="walkRusty"> Walk Rusty</li>
<li> <input type="checkbox" name="buyGroceries">Buy Groceries</li>
<li> <input type="checkbox" name="cssVideos">
<span id="special">Finish CSS Videos</span></li>
</ul>
CSS
li{
border: 3px solid red;
}
h3{
background: green;
}
#special{
color: green;
}
fiddle: https://jsfiddle.net/9kdsacwz
I am currently working on developing a filter button that will perform different actions based on which buttons are pressed. Pressing button1 will trigger one action, while pressing button2 will trigger another action. If button1 is pressed first, followe ...
I am encountering an issue with whitespace being added to the CSS after compiling a *.scss file in my Angular 7 project. This unwanted whitespace is causing incorrect results in the UI. To replicate the problem, you can visit... ...and copy and paste the ...
Apologies for not including a picture. You can view the design I am trying to achieve here. I am attempting to create two boxes with a third box below them, and another box on the right side of the layout. All enclosed within a larger container. Everythin ...
After a fruitless search on Google, I have turned to the experts on SO for assistance. The challenge: Create a duplicate of a dropdown menu and an input field with the click of a button (which can be done multiple times) The proposed solution: Implement ...
In my project using AngularJS and HTML, I have created a table to display records. I am looking for a way to iterate through the column values and strike through any value in the column that meets a certain condition. For example, in the demo provided her ...
Having issues with IE compatibility mode while opening my HTML file on desktop. In IE8, unable to switch it to compatibility mode as the icon seems to disappear in local HTML documents. Any insights on this? LATEST UPDATE: Tried three solutions but still ...
I have implemented FlexNav for my website navigation. The demo I used sets the width of top-level menu items to 20%, which works well with five menu items. .flexnav li { . . . width: 20%; } However, in my menu, the text lengths of the top ...
Currently working on developing a webpage, I am aiming to have two images in each row with captions positioned beneath them. The images are already configured as follows, I just require the captions: <div class = "container"> <img class = "pi ...
Here, I have a background image on the body and with the following script, when the user moves the mouse, the image in the background also moves. body { background-image: url('../images/1.png'); background-size: 98%; background-posi ...
In my code, there is an <i name="documentId" onClick={this.openDocument}/> element with the onClick method defined as follows: openDocument(event) { const { name } = event.target; console.log('name', name); console.log('target&a ...
Printer Model: TM-T88V User Manual: Receipt-marker Web template for the printer: (Provided by Epson) I'm completely new to computer languages and have been trying to understand how to print receipts. I've researched XML, HTML, CSS, and Jav ...
Recently, I created code in php for uploading an image/file using move_upload_file() as shown below: if (isset($_POST["title"]) && isset($_POST["content"]) && isset($_POST["category"])) { //if (!isset($_POST[])) $title = ...
My objective is to collect data from this html page in order to build a database: https://drive.google.com/folderview?id=0B0aGd85uKFDyOS1XTTc2QnNjRmc&usp=sharing One of the variables I am interested in is the price of the apartments. I have noticed th ...
I have been attempting to replicate the Spotify interface using only HTML and CSS. While I have successfully created the player section, I am struggling to center the player and incorporate the other two details as shown in the attached images. The 'G ...
I'm facing an issue with adding rows to the table using this code and I can't seem to find a solution. function add() { document.getElementById("popup").style.display = "block"; document.getElementById("add").addEventListener("click", func ...
My goal is to replicate the functionality of the iPhone's "Messages" app on a web application using AngularJS or any other JavaScript framework. Each message will be contained in a div element within a larger container. When a new message is added, I ...
Within my Angular 6 application, I am presenting data (a report) in a new window using the following code snippet. *** The 'result' variable contains Base64 data *** if (result != null) { const pdfWindow = window.open(""); ...
I am working with a function that looks like this: //Function Call with Single Parameter responses(baseURL); //Function Definition function responses(baseURL) { $.ajax({ url: baseURL, type: "get", cache: false, header ...
Trying to utilize a Bootstrap 4.5 example, but running into issues when renaming the HTML or CSS files - it breaks the formatting link for the page. Is there a way to duplicate the original example files and modify the names (such as "my_page.html" or "m ...
Is there a way to style the foreground colors of select list options differently in this dropdown code? <select id="tier" class="form-control" [(ngModel)]="tierId"> <option *ngFor="let m of tierList" value="{{m.tier}}" > {{m.option ...