I trying to find out which Selectors its for the background Color of Dropdown Contactform.
I used many selector but nothing works.
Contact form:
You would have to select the option tags inside the select tag. See my example below.
I have an id of #dropDown on the select tag. Then, I use #dropDown option to change the color of the text inside the option tags in the dropdown.
So in the inspect tool, get the CSS attribute of that select element and change the color of the option children.
html, body {
width: 100%;
min-height: 100%;
padding: 0;
margin: 0;
background-color: crimson;
}
#dropDown {
background-color: transparent;
color: white;
}
#dropDown option {
color: black;
}
<form action="">
<select name="" id="dropDown">
<option value="">Test 1</option>
<option value="">Test 2</option>
<option value="">Test 3</option>
</select>
</form>
Quite simply, is there any way to style specific select options in Chrome/Safari?
For example, if I had:
<select class="the-select">
<option class="header">TECHNICIANS</option>
<option>Joe Smith</option>
<option>Joe White</option>
<option class="header">PRODUCERS</option>
<option>Jane Black</option>
<option>Cindy Gray</option>
</select>
Is there anyway to style specifically those options with the class "header"? Obviously in CSS, if you do this:
select.the-select option.header {
background-color:#ff9900;
}
This should work, and does in other browsers, but not Chrome/Safari. Is this just a webkit issue and are there any workarounds for this?
Thanks!
EDIT: This seems to be an OSX webkit based browser issue, as it seems to work on Windows. I neglected to mention the fact that I cannot use optgroups because we need to be able to select those options as well. I am aware that optgroups would be the ideal solution, but unfortunately that cannot be the case in this instance.
I recently came across this technique to custom style a select tag with only CSS.
HTML:
<div class="styled-select">
<select class="the-select">
<optgroup label="TECHNICIANS">
<option>Joe Smith</option>
<option>Joe White</option>
</optgroup>
<optgroup label="PRODUCERS">
<option>Jane Black</option>
<option>Cindy Gray</option>
</optgroup>
</select>
</div>
CSS:
.styled-select {
width: 342px;
height: 30px;
overflow: hidden;
background: url("/img/selectarrow.png") no-repeat right;
border: none;
opacity: 0.8;
background-color: #999999;
}
.styled-select select {
background: transparent;
width: 342px;
padding-bottom: 10px;
padding-left: 10px;
padding-top: 5px;
font-size: 16px;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
font-weight: 200;
font-family: "lato", sans-serif;
font-size: 18px;
}
.styled-select select:focus {
outline: none;
}
Here's a fiddle: http://jsfiddle.net/eshellborn/AyDms/
And then just make sure you get a picture called 'selectarrow' for the drop-down image.
If you just want them to clearly be headers, use a tag intended for this: <optgroup>. This might also help you with applying CSS.
<select class="the-select">
<optgroup label="TECHNICIANS">
<option>Joe Smith</option>
<option>Joe White</option>
</optgroup>
<optgroup label="PRODUCERS">
<option>Jane Black</option>
<option>Cindy Gray</option>
</optgroup>
</select>
Actually you can try applying '-webkit-appearance: none;' for option.
select option {
-webkit-appearance: none;
}
select option.blue {
color: blue;
background-color: green;
}
select option.red {
color: red;
background-color: gray;
}
select option.pink {
color: pink;
background-color: yellow;
}
<select>
<option class="blue">SomeOption1</option>
<option class="red">SomeOption2</option>
<option class="pink">SomeOption3</option>
<select>
I have a select element which has several items. I want to change the color of its first item, but it seems the color only shows
when you click on the select dropdown. What I want is to change the color (like gray) when the page is loaded so users can see the first option color is different.
See the example here...
http://jsbin.com/acucan/4/
css:
select{
width: 150px;
height: 30px;
padding: 5px;
color: green;
}
select option { color: black; }
select option:first-child{
color: green;
}
html:
<select>
<option>Item1</option>
<option>Item2</option>
<option>Item3</option>
</select>
If the first item is to be used as a placeholder (empty value) and your select is required then you can use the :invalid pseudo-class to target it.
select {
-webkit-appearance: menulist-button;
color: black;
}
select:invalid {
color: green;
}
<select required>
<option value="">Item1</option>
<option value="Item2">Item2</option>
<option value="Item3">Item3</option>
</select>
What about this:
select{
width: 150px;
height: 30px;
padding: 5px;
color: green;
}
select option { color: black; }
select option:first-child{
color: green;
}
<select>
<option>one</option>
<option>two</option>
</select>
http://jsbin.com/acucan/9
For Option 1 used as the placeholder:
select:invalid { color:grey; }
All other options:
select:valid { color:black; }
Here is a way so that when you select an option, it turns black. When you change it back to the placeholder, it turns back into the placeholder color (in this case red).
http://jsfiddle.net/wFP44/166/
It requires the options to have values.
$('select').on('change', function() {
if ($(this).val()) {
return $(this).css('color', 'black');
} else {
return $(this).css('color', 'red');
}
});
select{
color: red;
}
select option { color: black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="">Pick one...</option>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
You can do this by using CSS: JSFiddle
HTML:
<select>
<option>Text 1</option>
<option>Text 2</option>
<option>Text 3</option>
</select>
CSS:
select option:first-child { color:red; }
Or if you absolutely need to use JavaScript (not adviced for this): JSFiddle
JavaScript:
$(function() {
$("select option:first-child").addClass("highlight");
});
CSS:
.highlight { color:red; }
I really wanted this (placeholders should look the same for text boxes as select boxes!) and straight CSS wasn't working in Chrome. Here is what I did:
First make sure your select tag has a .has-prompt class.
Then initialize this class somewhere in document.ready.
# Adds a class to select boxes that have prompt currently selected.
# Allows for placeholder-like styling.
# Looks for has-prompt class on select tag.
Mess.Views.SelectPromptStyler = Backbone.View.extend
el: 'body'
initialize: ->
#$('select.has-prompt').trigger('change')
events:
'change select.has-prompt': 'changed'
changed: (e) ->
select = #$(e.currentTarget)
if select.find('option').first().is(':selected')
select.addClass('prompt-selected')
else
select.removeClass('prompt-selected')
Then in CSS:
select.prompt-selected {
color: $placeholder-color;
}
This code works on Chromium and change the color to black once an option is selected:
select {
appearance: none;
}
select:invalid {
color: green;
}
select option {
color: black;
}
It seems that the fancy way with pure css would be more expensive; let's see with ES6
CSS
select{color:#AE1250}
JS
document.querySelectorAll('select').forEach((s) => {
s.addEventListener('change',(e)=>{
s.style.color=s.value==''?'#AE1250':'#fff';});
});
I tried this: http://jsfiddle.net/ilyaD/KGcC3/
HTML:
<select name="state" class="ddList">
<option value="">(please select a state)</option>
<option class="lt" value="--">none</option>
<option class="lt" value="AL">Alabama</option>
<option class="lt" value="AK">Alaska</option>
<option class="lt" value="AZ">Arizona</option>
<option class="lt" value="AR">Arkansas</option>
<option class="lt" value="CA">California</option>
<option class="lt" value="CO">Colorado</option>
</select>
CSS:
select { width: 400px; text-align: center; }
select .lt { text-align: center; }
As you can see, it doesn't work. Is there a CSS-only way to center text in the select-box?
There is a partial solution for Chrome:
select { width: 400px; text-align-last:center; }
It does center the selected option, but not the options inside the dropdown.
That's for align right. Try it:
select{
text-align-last:right;
padding-right: 29px;
direction: rtl;
}
the browser support for the text-align-last attribute can be found here: https://www.w3schools.com/cssref/css3_pr_text-align-last.asp
It looks like only Safari is still not supporting it.
Yes, it is possible. You can use text-align-last
text-align-last: center;
You have to put the CSS rule into the select class.
Use CSS text-indent
Example
<select class="day"> /* option 1 option 2 option 3 option 4 option 5 here */ </select>
CSS code
select { text-indent: 5px; }
2020, Im using:
select {
text-align: center;
text-align-last: center;
-moz-text-align-last: center;
}
I'm afraid this isn't possible with plain CSS, and won't be possible to make completely cross-browser compatible.
However, using a jQuery plugin, you could style the dropdown:
https://www.filamentgroup.com/lab/jquery-ui-selectmenu-an-aria-accessible-plugin-for-styling-a-html-select.html
This plugin hides the select element, and creates span elements etc on the fly to display a custom drop down list style. I'm quite confident you'd be able to change the styles on the spans etc to center align the items.
just using this:
select {
text-align-last: center;
padding-right: 29px;
}
select {
text-align: center;
text-align-last: center;
}
option {
text-align: left;
}
<select>
<option value="">(please select a state)</option>
<option class="lt" value="--">none</option>
<option class="lt" value="AL">Alabama</option>
<option class="lt" value="AK">Alaska</option>
<option class="lt" value="AZ">Arizona</option>
<option class="lt" value="AR">Arkansas</option>
<option class="lt" value="CA">California</option>
<option class="lt" value="CO">Colorado</option>
</select>
This JS function should work for you
function getTextWidth(txt) {
var $elm = $('<span class="tempforSize">'+txt+'</span>').prependTo("body");
var elmWidth = $elm.width();
$elm.remove();
return elmWidth;
}
function centerSelect($elm) {
var optionWidth = getTextWidth($elm.children(":selected").html())
var emptySpace = $elm.width()- optionWidth;
$elm.css("text-indent", (emptySpace/2) - 10);// -10 for some browers to remove the right toggle control width
}
// on start
$('.centerSelect').each(function(){
centerSelect($(this));
});
// on change
$('.centerSelect').on('change', function(){
centerSelect($(this));
});
Full Codepen here: http://codepen.io/anon/pen/NxyovL
I have always gotten away with the following hack to get it to work with css only.
padding-left: 45%;
font-size: 50px;
padding will center the text and can be tweaked for the text size :)
This is obviously not 100% correct from a validation point of view I guess but it does the job :)
Alternative "fake" solution if you have a list with options similar in text length (page select for example):
padding-left: calc(50% - 1em);
This works in Chrome, Firefox and Edge. The trick is here to push the text
from the left to the center, then substract the half of length in px, em or whatever of the option text.
Best solution IMO (in 2017) is still replacing the select via JS and build your own fake select-box with divs or whatever and bind click events on it for cross-browser support.
Not quite Centering but using example above you can make a left margin in select box.
<style>.UName { text-indent: 5px; }</style><br>
<select name="UserName" id="UserName" size="1">
<option class="UName" selected value="select">Select User</option>
<option class="UName" value="User1">User 1 Name</option>
<option class="UName" value="User2">User 2 Name </option>
<option class="UName" value="User3">User 3 Name</option>
</select>
this worked for me:
text-align: center;
text-align-last: center;
try this :
select {
padding-left: 50% !important;
width: 100%;
}
You can't really customise <select> or <option> much. The only way (cross-browser) would be to manually create a drop down with divs and css/js to create something similar.
If you didn't find any solution, you can use this trick on angularjs or using js to map selected value with a text on the div, this solution is full css compliant on angular but need a mapping between select and div:
var myApp = angular.module('myApp', []);
myApp.controller('selectCtrl', ['$scope',
function($scope) {
$scope.value = '';
}
]);
.ghostSelect {
opacity: 0.1;
/* Should be 0 to avoid the select visibility but not visibility:hidden*/
display: block;
width: 200px;
position: absolute;
}
.select {
border: 1px solid black;
height: 20px;
width: 200px;
text-align: center;
border-radius: 5px;
display: block;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-guide-concepts-1-production</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-app ng-controller="selectCtrl">
<div class=select>
<select ng-model="value" class="ghostSelect">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
<div>{{value}}
</div>
</div>
</div>
</body>
Hope this could be useful for someone as it took me one day to find this solution on phonegap.
While you cannot center the option text within a select, you can lay an absolutely positioned div over the top of the select to the same effect:
#centered
{
position: absolute;
top: 10px;
left: 10px;
width: 818px;
height: 37px;
text-align: center;
font: bold 24pt calibri;
background-color: white;
z-index: 100;
}
#selectToCenter
{
position: absolute;
top: 10px;
left: 10px;
width: 840px;
height: 40px;
font: bold 24pt calibri;
}
$('#selectToCenter').on('change', function () {
$('#centered').text($(this).find('option:selected').text());
});
<select id="selectToCenter"></select>
<div id="centered"></div>
Make sure the both the div and select have fixed positions in the document.
On your select use width: auto and no padding to see how long your text is.
I'm using 100% available width on my select and all of my options have the same length, this allows me to use very simple css.
text-indent will move the text from left, similar to padding-left
120px is my text length - I want to center it so take half of that size and half of the select size, leaving me with 50% - 60px
select{
width: 100%;
text-indent: calc(50% - 60px);
}
What if I have different sizes of options?
It is possible, however, the solution will not be a pretty one.
The former solution might get you really close to being centered if the difference between options isn't like 5 characters.
If you still need to center it more precisely you can do this
Prepare this class:
.realWidth{
width: auto;
}
Apply onChange listener to select element
In that listener apply .realWidth to the select element with
const selectRef = document.getElementById("yourId");
selectRef.classList.add("realWidth");
Get access to the real width of the option.
const widthOfSelect = selectRef.getBoundingClientRect().width / 2;
widthOfSelect is the width you are looking for. Store it in global/component variable.
Remove the realWidth, you don't need it anymore.
selectRef.classList.remove("realWidth");
I am using react, I'm not sure this will work in vanilla, if not you have to find another solution.
<select style={`textIndent: calc(50% - ${widthOfSelect}) %`}> ... </select>
Another solution, however, that is a bad one could be creating the CSS classes with js and putting it to head.
PROS:
probably works, I haven't tried the dynamic solution but it should work.
CONS:
if the program is not fast enough user will see the width: auto taking place and thus wonder what's going on. If that is the case just create duplicate select, hide it behind something with a higher z-index and apply the on select listener from the original to the hidden duplicate.
Might be hard to use if you cant inline the style because of vanilla limitation, but you can make a script to optimize the appendChild to the head.
I ran into this issue where a client was insisting on this, and they were on a Mac and and iPhone.
I wound up using media queries and a percentage padding for padding-left. Was this a satisfying solution? Not at all, but it let me move on.
Easiest way:
Use padding-left
select{
padding-left:2rem
}
I had a similar problem.
My work-around was to change to a fixed size font in the style section:
option {
font-family: Courier New;
width: 12ch;
font-size: 14pt
}
select {
font-family: Courier New;
width: 14ch;
font-size: 14pt
}
In body I padded the shown options with underlines to make them the same length.
Note used underlines on both sides to center display:
<select onchange='O.src=this.options[this.selectedIndex].value' align="center">
<option value="" align="center">___(none)___</option>
<option value="https://www.247backgammon.org/" align="center">_Backgammon_</option>
<option value="https://www.247klondike.com/klondikeSolitaire3card.php" align="center">__Klondike__</option>
<option value="https://www.247minesweeper.com/" align="center">_Minesweeper</option>
<option value="https://sudoku.com/" align="center">
<p>___Soduku___</p>
</option>
</select>
It's not 100% yet, but you can use this snippet!
text-align-last: center; // For Chrome
text-align: center; // For Firefox
Doesn't work on Safari or Edge, for now!
if the options are static, you could listen for the change event on your select box and add padding for each individual item
$('#id').change(function() {
var select = $('#id');
var val = $(this).val();
switch(val) {
case 'ValOne':
select.css('padding-left', '30px');
break;
case 'ValTwoLonger':
select.css('padding-left', '20px');
break;
default:
return;
}
});
I'm trying to create a basic title bar div that contains an h1 and a select list. I want the select list to be on the far right of the div, but floating it right is not working. Does anyone have any ideas? The code is very simple but can't see where the mistake is. Thanks!
<style type="text/css">
#select {
float: right;
}
h1 {
display: inline;
}
#titleBar {
width: 800px;
}
</style>
<body>
<div id="titleBar"><h1>Select Your Car </h1>
<select name="categories">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
</body>
Here's a link to the jsfiddle: http://jsfiddle.net/qhvDG/1/
Your style is not correct it should be as shown below, because the # represents an element's id and select is the tag name not the id.
select {
float: right;
}
Or better yet a little more descriptive like this:
div#titleBar > select {
float: right;
}
Here is an example fiddle http://jsfiddle.net/qhvDG/3/
Your "select" in the CSS is an ID, not an element name. Just remove the # sign from #select.
Try using "select" instead of #select in your style.
select {
float: right;
}