I'm trying to create a dropdown menu with alternating colors for the items. Can someone please provide the CSS code needed to style dropdown list items using ODD and EVEN?
I'm trying to create a dropdown menu with alternating colors for the items. Can someone please provide the CSS code needed to style dropdown list items using ODD and EVEN?
Try incorporating the CSS nth-child pseudo-class in your styling:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Custom Colors for Dropdown List Items</title>
<style type="text/css">
#myForm select option:nth-child(odd) {
color:red;
background:gray;
}
#myForm select option:nth-child(even) {
color:blue;
background:white;
}
#myForm select {
background:black;
color:yellow;
}
</style>
</head>
<body>
<form id="myForm" action="#" method="get">
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
</select>
</div>
</body>
</html>
To create a custom background color for different elements, use the following CSS:
#box1{background:red;}
#box2{background:green;}
#box3{background:#FFEA76;}
<div id="box1">Content 1</div>
<div id="box2">Content 2</div>
<div id="box3">Content 3</div>
To create a cohesive look for your list items, start by setting a default style and then customize the even items with a more specific style. The odd items will automatically inherit the default style.
.nav{
padding: 0;
list-style: none;
}
.nav li{
color: #c1a404;
background: #007e96;
padding: 10px;
font-size: 20px;
font-family: Futura, sans-serif;
}
.nav li:nth-child(even) {
color: white;
background: dodgerblue;
}<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>News</li>
<li>Careers</li>
<li>Contact</li>
</ul>While utilizing bootstrap 3 within a small div, I noticed that when I enlarge the window by dragging it horizontally, the fields (username and password input fields) that should remain inside the div end up shifting towards the center of the window. Can an ...
I have created a form using table layout. My goal is to automatically shift the focus to the next input field once the current one reaches its maximum length. I tried implementing this functionality with jQuery, but it only seems to work with inputs and no ...
Can you assist me in recreating my idea from an image? I am having trouble understanding how to select and place other elements, and then return them to their original positions after deselecting... I attempted to use a grid but it did not work properly. ...
I am currently developing a Web application and I have encountered some difficulties with the handling of newLine characters. My application allows users to create posts (similar to a forum) using the Markdown language. This means that the content is in p ...
I have been struggling to get the browser to prompt a 'Save Password' while using the form below. Despite trying various solutions from different forums, nothing seems to work. Can anyone point out where I might be going wrong? Any help would be ...
Need help with creating a Bootstrap nav menu similar to this design made in Photoshop? Wondering about the best way to position the logo and create dividers between menu items like shown in this image. Here's the HTML code currently being used: & ...
I encountered a strange issue with Angular 2 that may be a bug. I noticed that I couldn't print the same variable in a template twice within the same HTML tag. When I tried to use the following code, it resulted in error messages. <div class=" ...
I recently developed a dynamic web application using servlet. The main component is a form on the index.html page that triggers the servlet's doGet method. Check out an excerpt of my code for the doGet Method below. String firstName = request.getParam ...
I have successfully loaded content via AJAX, including a UL element with li items that each have tooltips. Now I want to load tooltip content via AJAX for each individual li item. How can I achieve this? Currently, I am making an AJAX call to load the li ...
Recently, I encountered an issue while working on a Next.js project involving the addition of an external script that uses vanilla JavaScript to dynamically create nodes. Despite importing global CSS at the top of my _app.js file, I noticed that the styles ...
<html> <head> <style type="text/css"> .step_box { border: 1.0px solid rgb(204, 204, 204); border-radius: 10.0px 10.0px 10.0px 10.0px; } .step_box:hover{ background: rgb(184, 225, 252); } .selected { background-color : #fff000; ...
Index.html: <nav-wrapper title="Email Test"> <nav-elem value="first"></nav-elem> <nav-elem value="second"></nav-elem> </nav-wrapper> app.js: app.directive('navWrapper', function() { return { ...
I encountered an issue while creating a multi-lingual page successfully. I utilized CssFlipper to generate the RTL Bootstrap file and everything was functioning perfectly, except for the fact that when I switch the language to Arabic, the slider on the pag ...
I am a beginner in JavaScript and I am attempting to access the next element of an array using an onclick function but so far I have not been successful. var i, len; function quiz() { var quiz_questions = [ "who is the founder of Fa ...
I am facing a simple issue: I have a cookie verification page (cookies_check.php) that I want to include on my home page (accueil.php). So, currently, the only code on accueil.php is: <?php include ('Controleur/cookies_check.php'); ?> He ...
I am currently working on creating a data entry form using a table layout. The form has two columns - the first column for input titles and the second column mostly for input tags. I styled the inputs in the second column to appear transparent with no bord ...
I have been using the jquery function menu() to generate a menu, and it's working as expected. However, there is one aspect that I would like to customize: the white border around the menu button should be black instead. You can see what I mean by ...
I have a table that I am working on. All values and buttons in the table need to be centered horizontally and vertically. However, there is an issue where if I enter a button link as a value of any row, the button and other text values become broken and ...
I am trying to create a unique effect where a tile divides into two on hover, with each tile acting as an individual link. Additionally, I want the background color of the tiles to change on hover. To achieve this, I have stacked two divs (toptile and bot ...
Whenever I am trying to load a CSS file via AJAX from my dreamhost account, I encounter the error message that says No 'Access-Control-Allow-Origin' header is present on the requested resource. After searching for solutions online, I stumbled upo ...