I am creating a monitoring system and I need the ability to select different amount of days. I want it styled kind of like this.
Previous [Dropdown here] Days
As you can see there is no border, I want the text to flow so if its 60 days there isn't lots of space to the right, when its 120/365 it looks okay but 2 digits has too much space on the right.
What is the best solution for this?
This is my HTML
<div class="col-md-12">
<h4>Previous
<select name="" id='daySelect'>
<option disabled='disabled' selected>Select Day</option>
<option value="30">30</option>
<option value="60">60</option>
<option value="90">90</option>
<option value="120">120</option>
<option value="365">365</option>
</select>
Days
(All Agencies)</h4>
</div>
This is my CSS
#daySelect {
width: 45px;
border: 1px solid transparent;
outline: none;
}
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Fiddle
i think this will help you
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
select {
-webkit-appearance: none;
-moz-appearance : none;
border:1px solid #ccc;
border-radius:3px;
padding:10px 10px;
text-justify: auto;
text-align: center;
}
}
</style>
</head>
<body>
<ul>
<select id="sel" name="sel">
<option value="o1">50</option>
<option value="o2">100</option>
<option value="o3">1000</option>
</select>
</ul>
<div id="mySelect"></div>
</body>
</html>
add text-align: center;
select
{
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
text-align: center;
}
Set this css:
option{ width:auto;overflow:hidden;}
it always works for setting dynamic width to text like <p> tags.
Also you can set this for <select> tag.
maybe some spaces? <option value="30"> 30</option> - considering it's a select(not so customizable)
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.
select {
width: 300px;
font-family: inherit;
font-size: 18px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 30px;
display:block;
color: #999;
border: none;
border-bottom: 1px solid #757575;
}
*:focus {
outline: #757575;
}
select:focus {outline:0;}
<select class="weekselection">
<option value="" disabled selected>Choose the weekday</option>
<option value="0">Monday</option>
<option value="1">Tuesday</option>
<option value="2">Wednesday</option>
<option value="3">Thursday</option>
<option value="4">Friday</option>
<option value="5">Saturday</option>
<option value="6">Sunday</option>
</select>
I'd like to remove or change the color of my dropdown menu:
That blue thing marked by the arrow. I've tried combinations of
select {
border: none;
}
*:focus {
outline: #757575;
}
select:focus {outline:0;}
But it still stays there. How can I remove it? Thank you!
HTML:
<select class="weekselection">
<option value="" disabled selected>Choose the weekday</option>
<option value="0">Monday</option>
<option value="1">Tuesday</option>
<option value="2">Wednesday</option>
<option value="3">Thursday</option>
<option value="4">Friday</option>
<option value="5">Saturday</option>
<option value="6">Sunday</option>
</select>
The answer is: you can't because css can't modify options' style.
But you can use a list and make it act like a dropdown to be free to stylize it:
Demo
$("ul li").slideUp();
$("label").click(function () {
$("ul li").slideToggle();
});
$("ul li").click(function () {
$("label").text($(this).text());
$("ul li").slideToggle();
});
ul {
display: table;
list-style: none;
padding: 0;
}
ul li {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>One</label>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
Similar to another question and I quote:
The dropdown of a select is part of what's called the ShadowDOM. In the current CSS specs, level 3, there's no way to target most ShadowDOM elements. You can read the specs on the ShadowDOM here, though there's not much in there regarding what you want.
Chrome has a few proprietary selectors to change some shadowDOM elements, but not all. Firefox has even fewer (as far as I know), and Opera has none. IE is probably just as bad or worse.
Your best bet with compatibility in mind is to use a Jquery plugin to mimic the select using other HTML elements if you really want to style it. Here's a neat one.
Select menu option border none
I think "!important" will help you to solve the problem.
select {
border: none !important;
}
I am not sure if this is even possible but we have a normal input with various options nested within it. It has a white background and the drop-down arrow (caret) is on the right. My client has asked me if I can swap the arrow to the left and change it's background colour. So far no luck in changing it, so if anyone can suggest a solution, that would be brilliant!
The code is as below:
<select id="categories"class="form-control" ng-model="type" ng-change="typeChange()">
<option value="silent">Show: Silent</option>
<option value="live">Show: Live</option>
<option value="buy it now">Show: Buy it now</option>
<option value="pledge">Show: Pledge</option>
<option value="sold">Show: Sold</option>
<option value="winning">Show: Winning</option>
<option value="losing">Show: Losing</option>
<option value="favourites">Show: Favourites</option>
<option value="current">Show: Current Bid Amount</option>
<option value="" selected>Show: All</option>
</select>
As you can see it is an angular project, so I am looking for a solution that is ideally 100% CSS or perhaps JS and CSS.
.styled-select #categories {
background: transparent;
width: 268px;
padding: 5px 5px 5px 30px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
.styled-select {
width: 240px;
height: 34px;
overflow: hidden;
background: url(http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg) no-repeat left #ddd;
border: 1px solid #ccc;
}
<div class="styled-select">
<select id="categories" class="form-control" ng-model="type" ng-change="typeChange()">
<option value="silent">Show: Silent</option>
<option value="live">Show: Live</option>
<option value="buy it now">Show: Buy it now</option>
<option value="pledge">Show: Pledge</option>
<option value="sold">Show: Sold</option>
<option value="winning">Show: Winning</option>
<option value="losing">Show: Losing</option>
<option value="favourites">Show: Favourites</option>
<option value="current">Show: Current Bid Amount</option>
<option value="" selected>Show: All</option>
</select>
</div>
Basically the little arrow box is replaced by an image and I set it to the left side of the select box. This was from:
http://bavotasan.com/2011/style-select-box-using-only-css/
And from:
How to customized select element through css?
Brino provided another way to do it, but he left the original little arrow box at the right and the customized one at the left in his example. If you prefer that way you can use direction: rtl and have only 1 container for the select box. Here's his fiddle with the correction.
One solution is to hide the existing arrow, and add a new arrow with the appropriate css. I modified the code from this Answer.
See working example here.
HTML
<label class="custom-select">
<select id="categories" class="form-control" ng-model="type" ng-change="typeChange()">
<option value="silent">Show: Silent</option>
<option value="live">Show: Live</option>
<option value="buy it now">Show: Buy it now</option>
<option value="pledge">Show: Pledge</option>
<option value="sold">Show: Sold</option>
<option value="winning">Show: Winning</option>
<option value="losing">Show: Losing</option>
<option value="favourites">Show: Favourites</option>
<option value="current">Show: Current Bid Amount</option>
<option value="" selected>Show: All</option>
</select>
</label>
CSS
label.custom-select {
position: relative;
display: inline-block;
}
.custom-select select {
padding-left: 20px; /*allows space for new arrow*/
-webkit-appearance: none; /*removes original arrow*/
}
/* Select new arrow styling */
.custom-select:after {
content: "▼";
position: absolute;
top: 0;
left: 80;
height: 100%;
font-size: 60%;
padding: 12px 7px;
background: #000;
color: white;
pointer-events: none;
}
.no-pointer-events .custom-select:after {
content: none;
}
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>