I want to know if there is any way to add asterisk after first option of select element?
Here is my html
<select class="form-control textyformcontrol">
<option selected>Service area</option>
<option>First Option</option>
<option>Second Option</option>
<option>Third Option</option>
</select>
Here is css
.textyformcontrol {
outline: none !important;
box-shadow: none !important;
border: none !important;
border-bottom: 1px solid #fff !important;
background: transparent;
border-radius: 0px;
color: #fff;
font-size: 16px;
padding: 10px 0px;
word-spacing: 2px;
height: auto;
}
All the options are having default white color.Thus how to add asterisk in red color through css?
The following solution adds a red asterisk to each option element that does not have the selected attribute:
.textyformcontrol option[selected]:after {
content: "";
}
.textyformcontrol option:after {
content: "*";
color: red;
}
Please see my demo here.
Related
I'm trying to change the background color on hover in select, I tried many ways and It wont change.Really appreciate If you can help,
.selector {
background-color: #252525;
color: #fff;
border: none;
border: 1px solid #595E57;
padding: 5px;
width: 150px;
}
.selector option:hover{
background-color: #1BA1E2 !important;
}
<select name="" class="selector">
<option value="">Select</option>
<option value="">Select</option>
</select>
.selector {
background-color: #252525;
color: #fff;
border: none;
border: 1px solid #595E57;
padding: 5px;
width: 150px;
overflow:hidden;
}
.selector option{
padding:5px;
}
.selector option:hover{
background-color: #1BA1E2 !important;
}
<select onfocus='this.size=10;' onchange='this.size=1; this.blur();' name="" class="selector">
<option value="">Select1</option>
<option value="">Select2</option>
<option value="">Select3</option>
<option value="">Select4</option>
</select>
Form elements are rendered by the OS and not the browser, so the CSS isn't always (or even 'is rarely') applied. There are ways to change the highlight color in Firefox, by adding a box-shadow to the CSS for option:hover, but this is browser-specific.
Try something like box-shadow: 0 0 10px 10px #1BA1E2 inset;
At the end it's not worth it. Think on mobile first. On iOS the options will be rendered in a very own way anyway. There are no colors.
I'm trying to "cheat" the design of a select box to act as an inline tab/widget.
After done some research, I know it's hard to modify by CSS. But I think it's probably manageable.
So, based on the snippet, when I click the option, the text will turn white. Only once I click some white space, the text become black. Why is that and how to fix it?
Secondly, how to remove the right side arrow bar thing? I run this CSS on the staging site, chrome doesn't show the arrow bar, but mozilla got.
select {
width: 100%;
padding: 0;
border: none;
background-image: none;
font-size: 16px;
color: #868686;
}
select option {
display: inline;
float: left;
margin-right: 128px;
}
select option:hover {
cursor: pointer;
}
select option:checked {
background: linear-gradient(#fff, #fff);
background-color: #ffffff !important;
/* for IE */
color: #000000 !important;
font-weight: 600;
}
<select multiple="multiple">
<option value="">Latest</option>
<option value="52">New</option>
<option value="53">Pre-Owned</option>
<option value="115">Unworn</option>
</select>
Need to use this simple way.
please remove this css
background: linear-gradient(#fff, #fff);
background-color: #ffffff !important;
from select option:checked
Or need to hide scroll then you can add overflow: auto; into select
Let me know further clarification
select {
width: 100%;
padding: 0;
border: none;
background-image: none;
font-size: 16px;
color: #868686;
overflow: auto;
}
select option {
display: inline;
float: left;
margin-right: 128px;
}
select option:hover {
cursor: pointer;
}
select option:checked {
color: #000000;
font-weight: 600;
outline: none;
}
<select multiple="multiple">
<option value="">Latest</option>
<option value="52">New</option>
<option value="53">Pre-Owned</option>
<option value="115">Unworn</option>
</select>
For a select element multiple I want to remove the background color of the selected option as I'm indicating the selection with the box before each option.
The intention is give a checkbox style to a select multiple element.
Why using a select multiple?
I'm working in a Angular App and should be useful style a select multiple as a collection of checkboxes. Doing that I will be able to use angular validations, ng-options, etc. I can build the same interface with inputs type checkbox but that imply a lot more of code for the same piece of functionality.
.form-group{
margin: 10px 0 0 20px;
}
select[multiple]{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
overflow: hidden;
box-shadow: none;
}
select[multiple].form-control{
padding: 6px 0 6px 6px;
}
select[multiple] option{
padding: 5px 0 7px 0;
}
select[multiple]:focus{
box-shadow: none;
}
select[multiple]:focus option:checked{
background-color: white;
}
select[multiple] option:before,
select[multiple] option:after{
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: 12px;
border: 1px solid #ccc;
border-radius: 3px;
background-color: #fff;
}
select[multiple]:focus option:checked:before{
background: white;
}
select[multiple] option:checked:before{
background-color: #319DB5;
border-color: #2c8ca1;
}
select[multiple] option:checked:after{
background-color: gray;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
<div class="form-group">
<label for="someOptions">Select multiple</label>
<select multiple="multiple" class="form-control" size="10" name="options" required="required" id="someOptions">
<option label="Option 1" value="number:1">Option 1</option>
<option label="Option 2" value="number:2">Option 2</option>
</select>
</div>
</div>
</body>
I think you are looking for this
select[multiple] option:checked { background: none; }
I want to create a dropdown list , but I need the arrows to be always visible AND to be customized to what you can see here:
https://jsfiddle.net/d388daek/
For the number input field, How can I add an up arrow too, Is it possible to use ⌄ as an HTML character entity instead of an arrow ?
HTML
.styleSelect select {
background: transparent;
width: 168px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
/* -webkit-appearance: none; */ /*This line hides the arrow completely*/
color: #000;
border-color: rgb(169, 169, 169);
}
.styleSelect {
width: 140px;
height: 34px;
border: 2px solid #000;
border-color: rgb(170, 170, 170);
}
<div class="styleSelect">
<select class='regularcolor'>
<option>one</option>
<option>two</option>
</select>
</div>
<div class="styleSelect">
<select class='offcolor'>
<option>one</option>
<option>two</option>
</select>
</div>
Try this out, you can obviously customize it more to make it look a certain way.
Hope this helps.
This question already has answers here:
Remove outline from select box in FF
(15 answers)
Closed 5 years ago.
I have a styled down down, but I cannot remove the dotted border when it is clicked in Firefox. I've used outline: none but it still doesn't work. Any ideas?
CSS:
.styled-select {
background: lightblue;
font-size: 20px;
height: 50px;
line-height: 50px;
position: relative;
border: 0 none !important;
outline: 1px none !important;
}
.styled-select select {
background: transparent;
border: 0;
border-radius: 0;
height: 50px;
line-height: 50px;
padding-top: 0; padding-bottom: 0;
width: 100%;
-webkit-appearance: none;
text-indent: 0.01px;
text-overflow: '';
border: 0 none !important;
outline: 1px none !important;
}
HTML:
<div class="styled-select">
<select id="select">
<option value="0">Option one</option>
<option value="1">Another option</option>
<option value="2">Select this</option>
<option value="3">Something good</option>
<option value="4">Something bad</option>
</select>
</div>
Please see this jsFiddle.
Found my answer here: https://stackoverflow.com/a/18853002/1261316
It wasn't set as the correct answer, but it worked perfectly for me:
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
select {
background: transparent;
}
This will help you. Place it on top of your style sheet.
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline:0;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}