Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS CSS <SELECT>

jPaulB

jPaulB

Coder
Hi Everybody,

I'm planning a form that will use several <SELECT> tags.
CSS: 
.form-container .custom-select {
    position: relative;
    font-family:  Cabin SemiBold", cursive, sans-serif;
    font-weight: bold;
    font-size: normal;
}

HTML: 
<div class="custom-select" style="width:85%;">
<select name="bWhat" id="bWhat">
<option value="0">What do you want to do?</option>
<option value="1">Go back to bed</option>
<option value="2">Yell at the dog</option>
<option value="3">Be persistent</option>
</select>
</div>

What I want to do is manage the <option value> part of the script so that the background and text-colors are specific colours.

How do I do this?

many thanks,
Paul
 
Sort by date Sort by votes
It's not possible to change the styling of the the <option> element without JavaScript.
Check this to see how to do it with JS:
www.w3schools.com

How To Create Custom Select Menus

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
 
Upvote 0 Downvote
Thanks for your quick reply, Johna.
I had hoped I was just missing what the tags were and I could do this easily.
So! I will get with the W3 and see what I can come up with.
Thanks again,
Paul
 
Upvote 0 Downvote
Hey there,
There is options like jqueryui

Selectmenu | jQuery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.
jqueryui.com jqueryui.com
 
Upvote 0 Downvote
Try this jPaulB
Code: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

<style type="text/css">
select{
    background-color: purple;
    color:white;
}
select option {
  background: purple;
  color: #fff;
}

select option[value="1"] {
  background:red;
}

select option[value="2"] {
  background: gray;
}

select option[value="3"] {
  background: blue;
}

select option[value="4"] {
  background: green;
}
select option[value="4"]:hover {
  background: pink;
}
    </style>
</head>

<body>
    <select>
        <option>Please choose</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </select>
</body>
</html>
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom