So I have a select element with multiple option elements. All option elements except one have:
color: black;
One option has:
color: red;
For example:
<select name="foo">
<option value="1" class="textBlack">1</option>
<option value="2" class="textBlack">2</option>
<option value="3" class="textRed">3</option>
<option value="4" class="textBlack">4</option>
</select>
The problem is I would want the option with red text to stay red after being selected. So when HTML in DOM looks like this (i.e. I click on the select element and choose the red option):
<select name="foo">
<option value="1" class="textBlack">1</option>
<option value="2" class="textBlack">2</option>
<option value="3" class="textRed" selected="selected">3</option>
<option value="4" class="textBlack">4</option>
</select>
I would like the text in the select element to be red as well. However the text is black.
with pure css I don't think it's possible. You can use select {color:red} but this will color red all the option. To achieve what you need probably will need javascript, an example of jQuery code is below:
$("select").change(function(){
var current = $("select option:selected").attr("value");
if (current == 3) {$("select").css('color','red');} else {$("select").css('color','black');}
});
$("select").click(function() {
$("select option").css('color','black');
});
Demo: http://jsfiddle.net/xrPKN/2/
You'll have to change the color of the select via JavaScript then. Something like
$("select").change(function(){
$(this).css("color", $(this).children("option:selected").css("color"));
});
.textRed{color:red}
Very simple, unless im missing something?
Related
I have labels and select lists associated with 2 different classes. Based on the radio button checked I would like to hide the elements associated to one class and show the elements associated to the other class.
HTML
Radio Button
<p>Your Preferred Input</p>
<label for="qual_quant">Qualitatively</label>
<input type=radio id="rb_qual" name="qual_quant" value="qual">
<label for="qual_quant">Quantitatively</label>
<input type=radio id="rb_quant" name="qual_quant" value="quant" checked>
This is an example of the code to be shown when #rb_qual = "qual"
<label for="fs_qual_tech" class="fs_qual">Technical - Qual</label>
<select id="fs_qual_tech" name="fs_qual_tech" class="fs_qual">
<option value="" disabled selected hidden>Choose Trait...</option>
<option value="2.5">Very Poor</option>
<option value="8">Poor</option>
<option value="13">Good</option>
<option value="18">Very Good</option>
</select>
Below is an example of code to be hidden when #rb_qual="qual"
<div class="fs_quant_div">
<label for="fs_quant_tech" class="fs_quant">Technical - Quant</label>
<select id="fs_quant_tech" name="fs_quant_tech" class="fs_quant">
<option value="" disabled selected hidden>Assign Points...</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
CSS
condition which hides all .fs_qual elements
.fs_qual {
display: none;
}
Trigger which shows .fs_qual
#rb_qual:checked ~ .fs_qual {
display: block;
}
Everything works -- except that trigger. If someone can help with this trigger I can expand on it for the other class and radio button value.
Screenshot of how it looks / functions(not)
I was able to make the trigger work for both cases.
You have added the quants inside the div.
So, the selector #rb_quant:checked ~ .fs_quant would not work as expected.
Please check this fiddle and let me know.
https://jsfiddle.net/xqekr762/
I attempted to change the color of an option like this but doesn't seem to change the color specified in the style. What am I missing here?
<select name="test" >
<option value="green" style="color:green;">this is green</option>
<option value="red" style="color:red;">this is red</option>
</select>
EDIT: Screenshot of the result running on my computer Mac OS (Chrome Version 67.0.3396.79 (Official Build) (64-bit))
I think you want to change the color of the select based on the selection. Therefore;
<select name="test" id="test" onchange="changeColor()">
<option value="green" style="color:green;">this is green</option>
<option value="red" style="color:red;">this is red</option>
</select>
<script type="text/javascript">
function changeColor() {
document.getElementById("test").style.color = document.getElementById("test").value;
}
</script>
Update 01
Give this a try, it is effectively the same, but see if chrome on mac is happy with this :-)
function selectionChanged(){
var selectElement = document.getElementById('test');
var selectedOption = selectElement.selectedIndex;
selectElement.style.color = selectElement.options[selectedOption].value;
}
<select name="test" id="test" onchange="selectionChanged()" style="color: green">
<option value="green" style="color:green;">this is green</option>
<option value="red" style="color:red;">this is red</option>
</select>
Original answer:
Perhaps what you need is....
<select name="test" id="test" onchange="document.getElementById('test').style.color = document.getElementById('test').options[document.getElementById('test').selectedIndex].value" style="color: green">
<option value="green" style="color:green;">this is green</option>
<option value="red" style="color:red;">this is red</option>
</select>
Note that the green color is hard-coded for select element since the first / default option is green
and then onchange of select will re-apply the style based on selected option. (You could also create a specific function in JS, but this code will do the trick if your requirements are not going to grow)
You could try to use colour code instead of "Red" / "Green"
Refer to below colour code,
https://www.w3schools.com/cssref/css_colors.asp
Try below coding,
<font color="#FF0000">This is some text!</font>
I want to change the placeholder/title color of Bootstrap-select dropdown box. Right now it looks like this, which is black, I want it to be a dark grey.
Before
I tried adding this to my css
span.filter-option.pull-left {
color: darkgrey;
}
After, which works fine. But this also made the options a dark grey instead of black. See here. I only want to change the color of the placeholder to dark grey not all the options. How do I best accomplish this? Thanks.
HTML:
<select name="box" class="selectpicker form-control">
<option value="">Select</option>
<option value="option1"> Option 1 </option>
</select>
EDIT:
Pure CSS styling does not seem to work for me for some reason. I have tried using Bootstrap-select's native title property but it is not greyed out like it showed in the docs. Is there a Javascript/JQuery way for me to change the color of span.filter-option.pull-left depending whether it is "Select" or "Option 1"?
PS. this is what Chrome inspector tool shows me for Select
and for Option 1, there is no other option besides these two.
The primary issue at hand is that the plugin (bootstrap-select) doesn't really have a set way to do this. If you're just using the single select (non-multiple attribute on the select) you can rely on the bs-placeholder class to be added when a value is selected, which (if you're using LESS) uses the #input-color-placeholder variable to set the color:
.bootstrap-select {
...
// The selectpicker button
> .dropdown-toggle {
...
&.bs-placeholder,
&.bs-placeholder:hover,
&.bs-placeholder:focus,
&.bs-placeholder:active { color: #input-color-placeholder; }
}
...
}
The only problem with this is that the plugin doesn't add the class if it's a multiple select, so you have to get a little creative to determine if a value is selected. Unfortunately the only DOM attribute manipulation that I can see happening by default is the title changing .dropdown-toggle. If you don't mind hard coding the initial title attribute into the CSS, you can add a class that changes the color if the title is a certain value like so (https://jsfiddle.net/gxvqa5xa/):
.bootstrap-select > .dropdown-toggle[title=Select],
.bootstrap-select > .dropdown-toggle[title=Select]:hover,
.bootstrap-select > .dropdown-toggle[title=Select]:focus,
.bootstrap-select > .dropdown-toggle[title=Select]:active { color: darkgrey; }
Now, if that is too dirty or unreliable, the plugin does support event listeners, so you could just listen for change, check to see if it's blank and add a class if it is (I prefer this method):
$('.selectpicker').on('changed.bs.select', function (e) {
$(this).prevAll('.dropdown-toggle').toggleClass('bs-placeholder', this.value === '');
}).trigger('changed.bs.select');
#import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css);
#import url(https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/css/bootstrap-select.css);
*{outline:none !important;}
.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.bootstrap-select > .dropdown-toggle.bs-placeholder:active { color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/js/bootstrap-select.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<select name="box1" class="selectpicker form-control" title="Select">
<option value="option1"> Option 1 </option>
<option value="option2"> Option 2 </option>
<option value="option3"> Option 3 </option>
</select>
<select name="box2" multiple class="selectpicker form-control" title="Select">
<option value="option1"> Option 1 </option>
<option value="option2"> Option 2 </option>
<option value="option3"> Option 3 </option>
</select>
Dont know how bootstrap select work, but we do have attribute selectors in CSS, you can use them.
Something like
elements[attribute] {
}
*******EDIT 1********
After digging into BS-select, i found something like this
<select class="selectpicker" title="Choose one of the following...">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
Which would place a brown color placeholder.
**** EDIT 2* *****
Working code
button.bs-placeholder[role='button']>span{
color:darkgrey;
}
Set different color for whole select tag.
Set normal color for all unchecked elements.
select { color: red; }
option:not(:checked) { color: black; }
option:checked { color: black; }
<select name="box" class="selectpicker form-control colored-title">
<option value="" selected="selected">Select</option>
<option value="option1"> Option 1 </option>
</select>
https://jsfiddle.net/ojdoug22/
edit:
option:checked { color: black; }
Just add this line to your CSS.
New JSFiddle:
https://jsfiddle.net/ojdoug22/1/
edit2:
Added screenshot. I see red "title" select options and all others are black. If i select another one then it changes.
Is there a CSS selector that allows me to select an element based on an HTML select option value?
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p>Display only if an option with value 1 is selected</p>
I'm looking for an HTML/CSS only method to only display a selected number of form fields. I already know how to do it with Javascript.
Is there a way to do this?
Edit:
The question title is perhaps misleading. I'm not trying to style the select box, that's pretty common and plenty of answers on SO already. I'm was actually trying to style the <P> element based on the value selected in the <select>.
How ever what I'm really trying to do is to display a number of form fields based on a selected numeric value:
<select name="number-of-stuffs">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div class="stuff-1">
<input type="text" name="stuff-1-detail">
<input type="text" name="stuff-1-detail2">
</div>
<div class="stuff-2" style="display:none">
<input type="text" name="stuff-2-detail">
<input type="text" name="stuff-2-detail2">
</div>
<div class="stuff-3" style="display:none">
<input type="text" name="stuff-3-detail">
<input type="text" name="stuff-4-detail2">
</div>
I would like to display div.stuff-1 and div.stuff-2 when number-of-stuffs=2 and display div.stuff-1 div.stuff-2 and div.stuff-3 when number of stuffs=2.
Something like this fiddle
Its called an attribute selector
option[value="1"] {
background-color:yellow;
}
Example http://jsfiddle.net/JchE5/
You can use
select option[value="1"]
but browser support won't be fantastic.
This probably requires a parent selector which has not been specified for CSS2 or CSS3.
CSS selector for "foo that contains bar"?
Is there a CSS parent selector?
A subject selector has been defined in the CSS4 working draft as of May 2013 but no browser vendor has implemented it yet.
Whether the method in question works (in theory) using the subject selector remains to be seen.
How about the alternative below?
You don't get a select box, but perhaps this is close enough.
#option-1,
#option-2,
#option-3 {
display: none;
}
#nos-1:checked ~ #option-1,
#nos-2:checked ~ #option-2,
#nos-3:checked ~ #option-3 {
display: block;
}
<input id="nos-1" name="number-of-stuffs" type="radio" value="1" checked="checked" /><label for="nos-1">1</label>
<input id="nos-2" name="number-of-stuffs" type="radio" value="2" /><label for="nos-2">2</label>
<input id="nos-3" name="number-of-stuffs" type="radio" value="3" /><label for="nos-3">3</label>
<div id="option-1">
<input type="text" name="stuff-1-detail" value="1-1" />
<input type="text" name="stuff-1-detail2" value="1-2" />
</div>
<div id="option-2">
<input type="text" name="stuff-2-detail" value="2-1" />
<input type="text" name="stuff-2-detail2" value="2-2" />
</div>
<div id="option-3">
<input type="text" name="stuff-3-detail" value="3-1" />
<input type="text" name="stuff-4-detail2" value="3-2" />
</div>
i believe that in "live" or realtime, it is possible only with javascript or jQuery. Wrap the potentially hidden fields in divs with display: none onLoad and have JS or jQuery change state to display: block or however you like.
//Show Hide based on selection form Returns
$(document).ready(function(){
//If Mobile is selected
$("#type").change(function(){
if($(this).val() == 'Movil'){
$("#imeiHide").slideDown("fast"); // Slide down fast
} else{
$("#imeiHide").slideUp("fast"); //Slide Up Fast
}
});
//If repairing is selected
$("#type").change(function(){
if($(this).val() == 'repairing'){
$("#problemHide").slideDown("fast"); // Slide down fast
$("#imeiHide").slideDown("fast"); // Slide down fast
}else{
$("#problemHide").slideUp("fast"); //Slide Up Fast
}
});
});
// type is id of <select>
// Movil is option 1
// Repairing is option 2
//problemHide is div hiding field where we write problem
//imeiHide is div hiding field where we write IMEI
i am using in one of my apps...
Possible with PHP too, but with PHP, you will have to send the change request or you can write a code in php to have certain classes to be loaded based on already selected values, for example
<select class="<?php if($valueOne == 'Something'){echo 'class1';}else{echo 'class2';}">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I found a solution based on this answer
satisfies op's request most. Not purely in CSS but definitely least amount of JavaScript is involved.
select[data-chosen='1']~.stuff-1{
display: block !important;
}
select:not([data-chosen='1'])~.stuff-1{
display: none;
}
select[data-chosen='2']~.stuff-2{
display: block !important;
}
select[data-chosen='3']~.stuff-3{
display: block !important;
}
<select name="number-of-stuffs" data-chosen = "1" onchange = "this.dataset.chosen = this.value;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div class="stuff-1">
<span> I am stuff-1!</span>
<input type="text" name="stuff-1-detail">
<input type="text" name="stuff-1-detail2">
</div>
<div class="stuff-2" style="display:none">
<span> I am stuff-2!</span>
<input type="text" name="stuff-2-detail">
<input type="text" name="stuff-2-detail2">
</div>
<div class="stuff-3" style="display:none">
<span> I am stuff-3!</span>
<input type="text" name="stuff-3-detail">
<input type="text" name="stuff-4-detail2">
</div>
You don't even need to write any separated js, despite embedding "this.dataset.chosen = this.value;" in onchange seems to be a bit hacky.
Hopefully a simple question here. I have the following html code:
<select id="dropdown">
<option value="#00FFFF">Cyan</option>
<option value="#FF00FF">Magenta</option>
</select>
<textarea style="background-color:[dropdown's selected value]">Sample Text</textarea>
What I'd like is the textarea's background color to dynamically change based on the dropdown's selection. Is there a simple way to reference the dropdown's value using CSS, or would JavaScript be the better route? HTML5 and CSS3 are definitely fair game here. Thanks!
here: DEMO
<select id="dropdown">
<option value="#00FFFF">Cyan</option>
<option value="#FF00FF">Magenta</option>
</select>
<textarea>Sample Text</textarea>
jquery much easier
$('#dropdown').change(function(){
$('textarea ').css('background-color', $(this).val());
});
You cannot do this just with HTML and CSS. Some JavaScript is needed. Example:
<select id="dropdown" onchange="setBg(this)">
<option selected value="#FFFFFF">White</option>
<option value="#00FFFF">Cyan</option>
<option value="#FF00FF">Magenta</option>
</select>
<textarea id="ta">Sample Text</textarea>
<script>
function setBg(sel) {
document.getElementById('ta').style.background =
sel.options[sel.selectedIndex].value;
}
</script>