I have this example.
I need to unite selected text in select and arrow and put it in the center.
How can i do this? I want that any selected text always will be in the center with arrow.
Maybe i can use something insted select? I need dropdown menu like this:
http://prnt.sc/c8iorl
Maybe select isn't what i need for this type menu?
.filter-col {
display: inline-block;
margin: 0 15px;
border: 1px solid black;
}
.filter-col select {
width: 100%;
padding: 0 15px 0 0;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
-ms-appearance: none;
appearance: none!important;
background-image: url(http://foodservice.freelancerblog.ru/images/i/sort-bottom-arrow.png);
background-position: right center;
background-repeat: no-repeat;
color: #8d8d8d;
font-size: 18px;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
text-align: right;
}
<div class="filter-col">
<select name="" id="">
<option value="">Text</option>
<option value="">Text11</option>
<option value="">Text2222</option>
<option value="">Text3333333333</option>
</select>
</div>
Related
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'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 am trying to replace a select dropdown arrow with a fa-icon (chevron-circle-down) but I can only find that the background can be replaced with an image in the css file.I can add the icon over the select,but it won't be clickable.Any help how I use font icon in select dropdown list ?
as you can't use pseudo-elements on <select> you use them on a label instead.
using:
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
will hide the default down arrow the select has and instead you use the fa-chevron-circle-down icon with it's unicode \f13a as an :after pseudo-element applied to the label
it's not really a 'beautiful' solution, but it does the trick
let me know if it helps
see below snippet
label.wrap {
width:200px;
overflow: hidden;
height: 50px;
position: relative;
display: block;
border:2px solid blue;
}
select.dropdown{
height: 50px;
padding: 10px;
border: 0;
font-size: 15px;
width: 200px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
label.wrap:after {
content:"\f13a ";
font-family: FontAwesome;
color: #000;
position: absolute;
right: 0;
top: 18px;
z-index: 1;
width: 10%;
height: 100%;
pointer-events: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<label class="wrap">
<select class="dropdown">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</label>
Any ideas on how to use a select in css but will only change the desired DDL and not all of them.
Example :
HTML:
<div style="position: relative; float: left; margin-left: 12px;">
<select class="theCombo">
<option value="" class="theCombo"> Choose...</option>
<option value="1"> Visa</option>
<option value="2"> Neteller</option>
</select>
</div>
CSS:
.theCombo,select { /* Incorrect : changing all selects of the ddl*/
-webkit-appearance: none;
-moz-appearance: none;
text-overflow: ellipsis;
color: white;
cursor: pointer;
outline: none;
border: 1px solid #E4EBED;
border-radius: 3px;
width: 157px;
/* height: 32px;
line-height: 25px;*/
font-size: 16px;
vertical-align: middle;
background-color: #333333 !important;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAKCAMAAACdQr5nAAAAPFBMVEXn6+P3+/L3+/L0+O/3+/L3+/L3+/L3+/L3+/L3+/L3+/L3+/L0+O/n6+Pq7eX3+/IAAAD2+vHz9+73+/KWthK3AAAAEXRSTlP0MXqqRZEIkAlEMnmr8+IRAJig9poAAABYSURBVHjadY5JDoAwDAMLdF+T+v9/hYIqFFDnFHtysKIlio72ppaFQgkzhAKpwM6O0zqGVHsHaiTaKtCTUBTvLj0fUpE3jAs2nqQa6AIo/R0/V+dGP7XkBDn1D5sPSFgFAAAAAElFTkSuQmCC");
background-repeat: no-repeat;
background-position: right center;
}
you want:
select.theCombo
for your CSS selector. This grabs all select elements and filters by "theCombo" class.
In CSS is there a selector for referencing a specific input type that also has a class?
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;
}