I'm currently trying to change the default placeholder of a disabled option from the default black. to #008752.
Code example below:
<div class="col-sm-3">
<select class="form-control" size="auto" id="selectpicker1" required>
<option value="" disabled selected>Please select...</option>
<option value="opt01">opt1</option>
<option value="opt02">opt2</option>
</select>
</div>
The line of code that needs to be changed:
<option value="" disabled selected>Please select...</option>
Example of the correct colour below, from the two date inputs, with the slectpicker in its default colour.
The following code below is also not working:
<option value="" style="color:#008752 !important" disabled selected>Please select...</option>
It changes the wrong text line and not the placeholder.
Just tried the webkit example and it just replaced the other placeholders and not the sector
.form-control::-moz-placeholder {
color: #008752 !important;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #008752 !important;
}
.form-control::-webkit-input-placeholder {
color: #008752 !important;
}
Outcome of webkit test
This should do the trick.
::-webkit-input-placeholder {
color: #008752;
}
:-moz-placeholder {
color: #008752;
opacity: 1;
}
::-moz-placeholder {
color: #008752;
opacity: 1;
}
:-ms-input-placeholder {
color: #008752;
}
Do you mean changing "Please select..." to this color? If that's what you want then you could try it with these:
Javascript
document.getElementById('selectpicker1').options[0].style.color = '#008752';
HTML (inline css)
<option value="" style="color:#008752" disabled selected>Please select...</option>
There are more and efficient ways, but these take the cake.
<style>
.form-control #disabledtext {
color : #008752 !important;
}
</style>
use id="disabledtext"
<div class="col-sm-3">
<select class="form-control" size="auto" id="selectpicker1" required>
<option id="disabledtext" value="" disabled selected>Please select...</option>
<option value="opt01">opt1</option>
<option value="opt02">opt2</option>
</select>
</div>
This is fragment form bootstrap.css:
.form-control::-moz-placeholder {
color: #999;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #999;
}
.form-control::-webkit-input-placeholder {
color: #999;
}
So try to change values and add !important to them:
.form-control::-moz-placeholder {
color: #008752 !important;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #008752 !important;
}
.form-control::-webkit-input-placeholder {
color: #008752 !important;
}
Fixed it myself by trying:
<select class="form-control" size="auto" style="color: #008752" id="selectpicker1" required>
Related
I'm new to CSS, and the following example is confusing me. So I would like to get a better understanding.
Here's what I did:
HTML:
<select id="dropdown" required>
<option disabled selected value>Choose current role</option>
<option class="option">Student</option>
<option class="option">Full Time Job</option>
<option class="option">Prefer Not to Say</option>
<option class="option">Others</option>
</select>
CSS:
body: {color: white;}
Either before and after any option is clicked on the webpage, the text color on the Select bar will be white.
I tried to change the text color with below syntax but to no avail:
#dropdown {
padding-right: 100%;
}
#dropdown:focus:after {
color: black;
}
It only works when I take out the #dropdown declaration:
#dropdown:focus:after {
color: black;
}
But I want to keep the #dropdown declaration for the creating padding. Is there other way to make this work?
And why doesn't it work with both #dropdown and #dropdown:focus:after declarations?
Try this:
var select = document.getElementById('mySelect');
select.onchange = function () {
select.className = 'redText';
}
.redText {
background-color:#F00;
}
<select id="mySelect">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
This is with javascript, i did it as easy as possible.
<select> tags are difficult to style, you'll need to strip it down first by using appearance: none on the select.
body {
font: 2ch/1 Consolas;
}
fieldset {
position: relative;
display: inline-block;
border: 0;
}
select {
appearance: none;
}
#dropdown {
display: inline-block;
color: tomato;
height: 28px;
padding: 3px 30px 3px 6px;
font: inherit;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background: #000;
}
#dropdown:focus {
color: lime;
background: #333;
}
.icon {
position: absolute;
top: 6px;
right: 16px;
display: inline-block;
padding: 0;
width: 22px;
height: 27px;
background: url(https://i.ibb.co/Kx33pSY/01.jpg) right / 90% no-repeat #000;
pointer-events: none;
}
<fieldset>
<legend>Whith Style</legend>
<output class='icon'></output>
<select id="dropdown" required>
<option disabled selected>Choose current role</option>
<option class="option">Student</option>
<option class="option">Full Time Job</option>
<option class="option">Prefer Not to Say</option>
<option class="option">Others</option>
</select>
</fieldset>
<fieldset>
<legend>Without Style</legend>
<select required>
<option disabled selected>Choose current role</option>
<option class="option">Student</option>
<option class="option">Full Time Job</option>
<option class="option">Prefer Not to Say</option>
<option class="option">Others</option>
</select>
</fieldset>
You can try this too:
select option {
background - color: white;
font - weight: bold;
color: red;
}
An HTML select element can be styled, however very minimally. Otherwise, if you want every different option colour, give a separate class or id to all options.
I already know how to get rid of text input outlines with
input:focus {
outline:none;
}
but it doesn't work with textareas and selects. Thanks
EDIT: Already tried textarea:focus and select:focus, which don't work.
no need for :focus you can simply do that by
input[type="text"], textarea, select {outline:none}
here is the working demo Link
The :focus isn't required. Try this:
HTML:
<textarea placeholder="without class"></textarea>
CSS:
textarea {
outline: none;
}
Without class Demo
But if you can set a class, much better.
HTML:
<textarea class="no-focus" placeholder="Look ma, no focus!"></textarea>
<select class="no-focus">
<option value="">Option, no focus!</option>
<option value="">Option, no focus!</option>
<option value="">Option, no focus!</option>
</select>
<textarea class="focus" placeholder="Your amazing textarea with focus"></textarea>
<select class="focus">
<option value="">Option, with focus</option>
<option value="">Option, with focus</option>
<option value="">Option, with focus</option>
</select>
CSS:
.no-focus {
outline: none;
}
.focus {
outline-color: yellow;
}
/* Just for demo */
textarea {
width: 100%;
height: 100px;
}
select {
padding: 20px 0px;
width: 100%;
margin-bottom: 30px;
}
Live Demo
i'm trying to get color options in the select option. This code works fine in mozilla, however it doesn't seem to work on chrome:
<style>
.color_box option:after {
content: " ";
height: 15px;
width: 65px;
display: inline-block;
}
option.black:after { background: #000000; }
option.red:after { background: #CB0F0F; }
option.purple:after { background: #8B11AA; }
</style>
<select class="color_box">
<option>Select</option>
<option class="black" value="#000000"></option>
<option class="red" value="#CB0F0F"></option>
<option class="purple" value="#8B11AA"></option>
</select>
Just css seems not work well.
Do you want to let it work like this?
http://jsfiddle.net/kvxsjyv0/1/
<style>
option.black { background: #000000; color:#000000 }
option.red { background: #CB0F0F; color: #CB0F0F; }
option.purple { background: #8B11AA;color: #8B11AA; }
option.default {background: #fff;}
</style>
<select class="color_box" onchange="this.style.background = this.value!=''?this.value:'#fff'">
<option class="default" value="">Select</option>
<option class="black" value="#000000"></option>
<option class="red" value="#CB0F0F"></option>
<option class="purple" value="#8B11AA"></option>
</select>
Is it possible to define HTML + CSS such that only a change to the stylesheet is needed to specify whether a choice is represented as a drop-down combobox or a list of radio buttons?
I suspect the answer to this is simply 'no' (which is perfectly acceptable as an answer, if backed up with evidence), but hopefully there's a way.
Do you mean something like this? Not cross-browser and very rough though, you could switch by simply changing the class.
Demo Snippet:
select.radio {
-webkit-appearance: none;
-moz-appearance: none;
border: none; height: 1.5em;
}
select.radio, select.radio:focus { outline: none; }
select.radio > option { display: inline-block; }
select.radio > option::before {
content: '';
display: inline-block;
width: 12px; height: 12px;
border: 1px solid gray; border-radius: 50%;
margin-right: 4px;
vertical-align: top;
}
select.radio > option:checked {
color: #000;
background: -webkit-linear-gradient(#ccc, #ccc);
}
select.radio > option:checked::before {
background-color: #00f;
}
select.normal {
width: 120px;
}
select { margin: 16px; }
<select id="dl1" size="4" class="radio">
<option value="One">One</option>
<option value="Two" selected>Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
</select>
<select id="dl2" size="4" class="normal">
<option value="One">One</option>
<option value="Two" selected>Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
</select>
The answer is sort of "No". You can't redefine a SELECT input a a list of radio buttons. However, you could create two divs with the separtae inputs contained within, and then display or not display based on CSS.
<style>
#divSelect
{
display : none;
}
#divRadio
{
display : block;
}
</style>
<div id="divSelect">
<select id="MyChoice" name="MyChoice" size="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div id="divRadio">
1 <input type="radio" name="MyChoice" value="1"/><br/>
2 <input type="radio" name="MyChoice" value="2"/><br/>
3 <input type="radio" name="MyChoice" value="3"/><br/>
</div>
You can hide one or the other with CSS, but you will have to design your JS (or whatever is receiving this information) more robustly - Check both options and take data from the non-empty one.
Simply make one display and one not
HTML:
<div id="radios">
bar <input type="radio" name="foo" value="bar"/>
barbar <input type="radio" name="foofoo" value="barbar"/>
</div>
<div id="checks">
<select name="bar">
<option value="foo1">foo1</option>
<option value="foo2">foo2</option>
</select>
</div>
CSS:
<style>
#radios{
display:block;
}
#checks{
display:none;
}
</style>
What you can do is style the css for all selects and then change the style for radio buttons.
Kinda like this
select {
font-family: Cursive;
}
input[type=radio ]{
display : inline-block;
margin-left : -28px;
padding-left : 28px;
background : url('checks.png') no-repeat 0 0;
line-height : 24px;
}
here are some links that might help.
http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/
http://css-tricks.com/dropdown-default-styling/
I have a select element and am using the first option as the title of the select field. I am wondering if there is a way to gray out the text inside the select field when the first option is selected. Can this only be done in JS, or is there a CSS solution?
I have tried changing the style of the first option but that only changes the colour of the text when I activate the dropdown menu.
<select>
<option>Please select your favourite fruit</option>
<option>Apple</option>
<option>Banana</option>
</select>
Here is a more modern solution so it's not specific to the first option, but rather an invalid option and requires no JS to show only the title/placeholder option as grey whereas the rest appear normal.
select,
select option {
color: #000000;
}
select:invalid,
select option[value=""] {
color: #999999;
}
label {
display: block;
margin: 16px 0;
}
/*Added for browser compatibility*/
[hidden] {
display: none;
}
<label>
Invalid option cannot be selected and is hidden from the user in the dropdown.
<select required>
<option value="" selected disabled hidden>Please select your favourite fruit</option>
<option>Apple</option>
<option>Banana</option>
</select>
</label>
<label>
Invalid option cannot be selected, but is not hidden from the user in the dropdown.
<select required>
<option value="" selected disabled>Please select your favourite fruit</option>
<option>Apple</option>
<option>Banana</option>
</select>
</label>
<label>
Invalid option can be selected and is not hidden from the user in the dropdown.
<select required>
<option value="" selected>Please select your favourite fruit</option>
<option>Apple</option>
<option>Banana</option>
</select>
</label>
The :invalid selector on the select only works on an option
if the select box is required and the selected option's value is empty,
so you can style it as you would a text box's placeholder text.
Setting it to disabled prevents the user from selecting it in the select's options,
and setting it to hidden hides it from the select's options.
Here is my CodePen demo that explores additional select box styles and shows this one in action on a light background.
September 2017 edit
You should take a look at Tessa's answer below, since it's CSS only and much better now! This answer is almost 5 years old now, so things have changed a bit. I'm keeping the original answer just for reference.
Original answer
I am closer to what you need:
You need to gray the entire SELECT (so that when it's closed, it is gray), then "un-gray" all the OPTION's (put them black) and gray the first-child. Something like this:
CSS
select
{
color: #ccc;
}
option
{
color: #000;
}
option:first-child
{
color: #ccc;
}
EDIT
So the edited code is:
HTML
<select onchange="changeMe(this)">
<option selected disabled>Please select your favourite fruit</option>
<option>Apple</option>
<option>Banana</option>
</select>
Javascript
<script type="text/javascript">
function changeMe(sel)
{
sel.style.color = "#000";
}
</script>
I've update jsFiddle. You can check it here: http://jsfiddle.net/s5Xy2/5/
Notice that I've also changed the HTML part, because I think you want to use the "disabled" attribute (and because of that, you'll have to add the "selected" attribute also).
If you still want the pure CSS code, it's here: http://jsfiddle.net/s5Xy2/4/
Inspired from Fábio Silva's solution, a very cool solution using AngularJS:
select {
color: #ccc;
}
option {
color: #aaa;
}
option:first-child {
color: #ccc;
}
select.ng-dirty {
color: #aaa;
}
You can edit your code to my code :
<select id="drop">
<option>Please select your favourite fruit</option>
<option>Apple</option>
<option>Banana</option>
</select>
<style type="text/css">
#drop :first-child
{
color:gray;
}
</style>
This code set first item color gray .
i hope help you...
Here's my 2018 version that combines some of the other answers and a bit of my own js. There does not seem to be a solution that works w/o javascript if you want the first element gray when it is closed.
var grayout = document.getElementsByClassName('grayout');
var grayOutSelect = function() {
if ( this.value === "" ) {
this.classList.add('gray');
} else {
this.classList.remove('gray');
}
};
for (var i = 0; i < grayout.length; i++) {
grayout[i].addEventListener('change', grayOutSelect);
if ( grayout[i].value === "" ) {
grayout[i].classList.add('gray');
} else {
grayout[i].classList.remove('gray');
}
}
select {
color: #333;
}
select.gray {
color: #aaa;
}
/* Optional styles for when the select is open. Doesn't work on all browsers */
option {
color: black;
}
.grayout option:first-child {
color: gray;
}
/* Extra / just to make the demo look nice */
body {
background: #ddd;
padding: 30px;
font-size: 20px;
}
select {
margin: 0;
vertical-align: top;
padding: 5px 60px 5px 8px;
background-color: #fff;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/4b/Feather-arrows-chevron-down.svg');
background-position: 97% center;
background-position: right 8px center;
background-repeat: no-repeat;
background-size: 18px;
border: 2px solid #999;
border-radius: 3px;
-webkit-appearance: button;
-webkit-border-radius: 3px;
-webkit-padding-end: 30px;
-webkit-padding-start: 8px;
-webkit-user-select: none;
-moz-appearance: none;
font-size: inherit;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: border 300ms;
}
<p>main example</p>
<p>
<select class="grayout">
<option value="">Please select your favourite fruit</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</select>
</p>
<p>one of the real options is selected</p>
<p>
<select class="grayout">
<option value="">Please select your favourite computer</option>
<option value="apple" selected>Apple</option>
<option value="c64">Commodore 64</option>
<option value="gateway2000">Gateway 2000</option>
</select>
</p>
<p>the grayout style is not applied here</p>
<p>
<select>
<option value="">Please select your favourite insult</option>
<option value="jerk">Jerk</option>
<option value="ahole">A**hole</option>
<option value="shakespeare">Thou damned and luxurious mountain goat</option>
</select>
</p>