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.
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 fix an issue with a hoverable span in html. Inside the span element is a html-select option. When I try to select something, the hoverable span disappears.
This issue only occurs in Firefox. In Chrome I don't have this issue.
HTML Part:
<span class="over">
<i class="fa fa-cogs edit"></i>
<div>
<form method="post" accept-charset="utf-8" action="/edit">
<div class="input select">
<label for="select-id">Select</label>
<select name="select_id" id="select-id">
<option value="">-- select --</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>
</form>
</div>
</span>
SCSS Part:
.over{
margin-right: 0.5em;
&>i{
color: #bbbbbb;
padding: 2px;
}
&>a{
padding: 2px;
display: none;
&:hover{
color: #000;
}
}
&>div{
display: none;
position: absolute;
border: 1px solid #ccc;
margin: 6px 0 0 -20px;
padding: 2px;
background: white;
border-radius: 4px;
min-width: 140px;
z-index: 100;
text-align: left;
input, select{
padding: 0 5px;
line-height: 1.5em;
width: auto;
display: inline-block;
}
label{
margin: -4px 4px;
display: inline-block;
}
}
&:hover{
border: 1px solid;
border-radius: 4px;
&>i{
color: #000;
}
&>a{
display: inherit;
}
&>div{
display: inline-block;
}
}
}
}
In Chrome I can hover over the span item and select a option from the select-element. Even if I leave the hoverable area.
In Firefox I can also hover over the div, but as soon as I leave the hoverable area, the box disappears and I cannot select an Item.
Problem seems to be fixed in Firefox now.
I can't seem to change the focus color of my select input, I'm pretty confused as to what I should override.
.form-control:focus {
border-color: inherit;
-webkit-box-shadow: none;
box-shadow: none;
}
.forma #kome {
border-color: #8e8e8e;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
text-align-last: center;
cursor: pointer;
color: #000000;
-webkit-appearance: none;
background: transparent url("http://icons.iconarchive.com/icons/mahm0udwally/all-flat/16/User-icon.png") no-repeat 15px center;
}
.forma select :focus {
border-color: #2a6dc9 !important;
}
<form class="center-block forma" action="" method="post">
<div class="form-group">
<select class="form-control" id="kome" name="kome">
<option value=" disabled selected ">Choose</option>
<option value="smth"> smth </option>
<option value="smth2"> smth2 </option>
</select>
</div>
</form>
There should be no space between select and :focus selectors. Space denotes parent-child relationship, i.e. "focused child of select". While select:focus means AND: focused select.
.forma select:focus {
border-color: #2a6dc9 !important;
}
This worked for me with chrome, by changing the border-style to insset, and then whatever outline-color you want. It does not change the focus color on the options, but it does at least change the focus color when you tab to it.
select {
border-style: inset;
outline-color: orange;
}
to style select child on focus :
change
.forma select :focus{
border-color: #2a6dc9 !important;
}
with
.forma option:hover{
border: 1px solid red ;
}
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.
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; }