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>
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 have tried it by putting it in class then edit through by accessing the class
I've also tried optgrp but that didn't worked either.
Please see my code below
<style>
select {
width: 300px;
margin: 10px;
font-size:10px;
border:0;
-webkit-appearance: none;
}
select:focus {
min-width: 300px;
width: 300px;
}
</style>
<label for="Department">Choose a Department:</label>
<select name="Select Department" onchange="location = this.value;">
<option value="#">All Departments</option>
<option value="#">Cardiology</option>
<option value="#">Plastic, Cosmatic & Reconstrustive Surgery</option>
<option value="#">Dentistry</option>
</select>
Try this..
<style>
.drpdwn-style{
width: 300px;
margin: 10px;
font-size:10px;
border:0;
-webkit-appearance: none;
}
</style>
<label for="Department">Choose a Department:</label>
<select name="Select Department" class= "drpdwn-style" onchange="location = this.value;">
<option value="#">All Departments</option>
<option value="#">Cardiology</option>
<option value="#">Plastic, Cosmatic & Reconstrustive Surgery</option>
<option value="#">Dentistry</option>
</select>
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>
I have this styled-select dropdown, which shows only 5 options out of all existing options:
<div style="background:grey; height:400px; width: 400px;">
<div class="styled-select">
<select id="campaignListId" name="campaignId" onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=0;' onblur="this.size=0;">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
<option value="5">Fifth</option>
<option value="6">Sixth</option>
<option value="7">Seventh</option>
</select>
</div>
</div>
And this is how my css looks like:
.styled-select select {
position: absolute;
background: transparent;
width: 200px;
padding-top: 5px;
font-size: 32px;
font-weight: bold;
font-family: 'PT Sans', sans-serif;
color: #4F9DD0;
line-height: 1;
border: 0;
border-radius: 4;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
z-index: 2;
}
.styled-select {
background: url(resources/img/campaignSelector.png) no-repeat right #ddd;
background-color: white;
width: 200px;
height: 50px;
position: relative;
margin: 0 auto;
}
.styled-select option {
font-size: 20px;
background-color: white;
}
I want it to act like this picture, I mean when I click on the main box in order to select one option, the window of options open starting from the below of main select box:
But this is what happens, which overlaps the main window:
The problem is with your script
onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=0;' onblur="this.size=0;"
So you can remove it and just hide the extra options using css:
options:nth-child(n+6) {
display:none;
}
Demo:
.styled-select select {
position: absolute;
background: transparent;
width: 200px;
padding-top: 5px;
font-size: 32px;
font-weight: bold;
font-family: 'PT Sans', sans-serif;
color: #4F9DD0;
line-height: 1;
border: 0;
border-radius: 4;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
z-index: 2;
}
.styled-select {
background: url(resources/img/campaignSelector.png) no-repeat right #ddd;
background-color: white;
width: 200px;
height: 50px;
position: relative;
margin: 0 auto;
}
.styled-select option {
font-size: 20px;
background-color: white;
}
option:nth-child(n+6) {
display:none;
}
<div style="background:grey; height:400px; width: 400px;">
<div class="styled-select">
<select id="campaignListId" name="campaignId" >
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
<option value="5">Fifth</option>
<option value="6">Sixth</option>
<option value="7">Seventh</option>
</select>
</div>
</div>
Update
Apparently, you can't hide an option tag using css on Mac OS, so in this case I suggest to use a plugin like select2
$('select').select2({
minimumResultsForSearch: Infinity
});
select {
width:100%;
}
.select2-results__options li:nth-child(n+6) {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<div style="background:grey; height:400px; width: 400px;">
<div class="styled-select">
<select id="campaignListId" name="campaignId" >
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
<option value="5">Fifth</option>
<option value="6">Sixth</option>
<option value="7">Seventh</option>
</select>
</div>
</div>
Keep attention about multiple selects in the same page. In this demo, all of the select's items with index greater than 5 will be invisible.
If you want to hide those options in specific select, you can add class to it and add the selector this class.
Demo:
var con = $('select').select2({
minimumResultsForSearch: Infinity
}).data('select2').$results.addClass("wrap");
select {
width:100%;
}
.wrap.select2-results__options li:nth-child(n+6) {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<div style="background:grey; height:400px; width: 400px;">
<div class="styled-select">
<select id="campaignListId" name="campaignId" >
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
<option value="5">Fifth</option>
<option value="6">Sixth</option>
<option value="7">Seventh</option>
</select>
</div>
</div>
Update 2
Another solution (a little bit pache) that not required a plugin but use javascript (that's the requirement).
The idea is:
button to keep the selected value and will show/hide the select by click.
select with size=5 which be hidden by default and toggle when user click on the button.
In the first click, the select will be displayed.
In the second click, the select will be hidden again and the selected value will by the text in the button.
Demo:
For unknown reason this snippet doesn't work right now, so you can see the effect in this bin
$('button').click(function() {
$('select').toggle();
});
$('select').change(function(){
var sel = $(this).hide();
$('#text-holder').html(sel.val());
}).trigger('change');
.wrapper {
cursor:pointer;
position:relative;
display:inline-block;
}
select {
display:none;
position:absolute;
left:0;
width:100%;
}
button {
text-align:left;
}
#text {
border:1px solid;
width:120px;
}
.arrow {
float:right;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div class="wrapper">
<button id="text">
<span id="text-holder"></span>
<span class="arrow">▼</span>
</button>
<select size="5">
<option selected>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</div>
I tried you code and realized there is something not required for your expected output.
onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=0;' onblur="this.size=0;"
The above shown statement can be removed and it works fine.
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/