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;
}
Related
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>
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.
How to get the select dropdown arrow styled like shown in the image below.
<select>
<option>Select Any</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
Try this:
HTML:
<div class="styled-select slate">
<select>
<option>Here is the first option</option>
<option>The second option</option>
<option>The third option</option>
</select>
</div>
CSS:
div { margin: 20px; }
.styled-select {
height: 29px;
overflow: hidden;
width: 240px;
}
.styled-select select {
background: transparent;
border: none;
font-size: 14px;
height: 29px;
padding: 5px; /* If you add too much padding here, the options won't show in IE */
width: 268px;
}
.styled-select.slate {
background: url(http://i.stack.imgur.com/8CVVr.png) no-repeat right center;
height: 34px;
width: 240px;
}
How about this... Just set that image to Select's background.
.select-style {
width: 268px;
line-height: 1;
border: 0;
overflow: hidden;
height: 34px;
position:relative;
background:#fff;
}
.select-style>select{
-webkit-appearance: none;
appearance:none;
-moz-appearance:none;
width:100%;
background:none;
background:transparent;
border:none;
outline:none;
cursor:pointer;
padding:7px 10px;
}
.select-style>span{
position:absolute;
bottom: 0;
right: 0;
height: 0;
width: 0;
cursor:pointer;
border-right: 10px solid #ff0099;
border-bottom: 10px solid #ff0099;
border-left: 10px solid transparent;
border-top: 10px solid transparent;
}
select::-ms-expand {
display: none;
}
<div class="select-style">
<select>
<option>Select Any</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<span></span>
</div>
Fiddle: https://jsfiddle.net/sank8893/bhy9do60/9/
As others have mentioned you can hide the default select arrow by appearance property and apply your own style.
To support lower versions of IE(i haven't consider below 9) as appearance property won't work even with ms prefix , you can use the below method to have common support.
Arrow made by css not an image.
$( "#sel_val" ).change(function() {
var option = $(this).find('option:selected').val();
$('#sel_txt').text(option);
});
.wrapper{width:250px;margin:10px auto;}
.sbx{
margin:0;
width:100%;
font-family:arial;
position:relative;
background-color:#eee;
}
.cus_selt:after{content:'';width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid #FD025F;
position:absolute;
bottom:-1px;
z-index:2;
right:-6px;
transform:rotate(-45deg);
}
.cus_selt{padding:20px;display:block;}
.styled {
float:left;
height: 56px;
margin: -58px 0 0;
opacity: 0;
width: 100%;
filter: alpha(opacity=0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="sbx" id="yoe_fld">
<span class="cus_selt" id="sel_txt">Select a value*</span>
<select id="sel_val" class="styled">
<option>Select</option>
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
<option>option5</option>
<option>option6</option>
<option>option7</option>
</select>
</div>
</div>
Source link for custom select dropdown click
Source link for CSS arrow click
see here jsfiddle
first you need to remove the default styling of the select dropdown. to do that use
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
for IE use :
select::-ms-expand {
display: none;
}
then just apply your desired style, in this case with background-image
or you can use border to make a triangle and place it by using pseudo-elements like :before or :after .
select {
background:url("http://i.stack.imgur.com/8CVVr.png") no-repeat scroll right bottom;
background-size:contain;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding:5px 10px;
}
This question already has answers here:
How do I style a <select> dropdown with only CSS?
(25 answers)
Closed 7 years ago.
I have this sample: JsFiddle
<div>
<select>
<option>Select1</option>
<option>Select2</option>
<option>Select35555</option>
</select>
</div>
I want to select and customize the arrow in the picture below
How can I do something? I found some similar posts but I still do not understand how to do... Can you help me please with a simple example?
You need to use CSS.
That's an example I found on google for a css template of a select:
JSFiddle
HTML:
<div>
<select class="select-style">
<option>Select1</option>
<option>Select2</option>
<option>Select35555</option>
</select>
</div>
CSS:
.select-style {
padding: 0;
margin: 0;
border: 1px solid #ccc;
width: 120px;
border-radius: 3px;
overflow: hidden;
background-color: #fff;
background: #fff url("http://www.scottgood.com/jsg/blog.nsf/images/arrowdown.gif") no-repeat 90% 50%;
}
.select-style select {
padding: 5px 8px;
width: 130%;
border: none;
box-shadow: none;
background-color: transparent;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select-style select:focus {
outline: none;
}
You can modify it and change it like you want it. You can change the size of the arrow too.
I need to add some custom styles to HTML select box completely changing its default style.
This is how my select box should be after adding custom styles.
I could have to get these styles to certain level. But still not 100%.
This is my HTML and CSS.
<span class="custom-dropdown large">
<select class="select select_large">
<option>Select an Option</option>
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
<option>Option Four</option>
<option>Option Five</option>
</select>
</span>
.large {
font-size: 15px;
}
.select{
font-size: inherit;
padding: 10px;
margin: 0;
}
.select_large {
background-color: #001848;
color: #fff;
}
.select_large option{
background-color: #dadada;
color: #000;
border: none;
padding: 2px 5px;
}
.select_large option::hover {
background-color: #20b390;
}
#supports (pointer-events: none) and
((-webkit-appearance: none) or
(-moz-appearance: none) or
(appearance: none)) {
.custom-dropdown {
position: relative;
display: inline-block;
vertical-align: middle;
}
.select {
padding-right: 40px;
border: 0;
border-radius: 3px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.custom-dropdown::before,
.custom-dropdown::after {
content: "";
position: absolute;
pointer-events: none;
}
.custom-dropdown::after { /* Custom dropdown arrow */
content: "\25BC";
font-size: 20px;
line-height: 15px;
right: 10px;
top: 50%;
margin-top: -5px;
}
.custom-dropdown::before { /* Custom dropdown arrow cover */
width: 40px;
right: 0;
top: 0;
bottom: 0;
border-radius: 0 3px 3px 0;
}
.large::before {
background-color: #001848;
//background-color: #dadada;
}
.large::after {
color: #dadada;
//color: #434343;
}
#-moz-document url-prefix() {
.select { padding-right: .9em }
.large .select { padding-right: 40px }
.small .select { padding-right: .5em }
}
}
This is a FIDDLE
Hope somebody will help me out.
Thank you.
Selects are really annoying to style. This is because they depend on the browser and operating system and therefore parts of them are not style-able. For example, you can change the background color of the options, but if an option is selected, the styling gets messed up (you can't change the color of the selected option).
Try looking into some jQuery plugins like ms-Dropdown: http://www.marghoobsuleman.com/jquery-image-dropdown
Your safest bet is to find a js plugin that will render a dynamic with custom styling while maintaining the functionality of your .
The problem with customizing with custom CSS is that its usually the OS who styles them and its looks change from OS to OS considerably, making it nearly impossible to style in an uniform matter with pure CSS.
simply do a search for 'jquery selectbox' or 'jquery custom select'