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; }
Related
I want to create an input that contains a button that has an arrow down so the user can click on it to open a list or close it. I can't put the button inside the input, what do i miss here?
.input-wrapper {
position: relative;
}
.combobox-input {
font-size: 16px;
font-weight: normal;
color: #4d4d4d;
background: #ffffff;
border: 1px solid #828995;
height: 30px;
padding: 4px 10px;
}
.combobox-arrow {
display: inline-block;
padding: 6px;
border: none;
background-color: white;
background-image: url(...);
width: 25px;
height: 25px;
}
<div className="input-wrapper">
<input className="combobox-input"/>
<button className="combobox-arrow" ></button>
</div>
Try this and see if it suits your need:
(you can modify the snippet code as per your need)
document.getElementById('caret').addEventListener('click', function() {
// your code here if you want to add some logic
});
button#caret {
border: none;
background: none;
position: absolute;
top: 0px;
right: 0px;
}
.input-wrap {
position: relative;
display: inline;
}
<label>List of places<br/>
<div class="datalist-wrap">
<div class="input-wrap">
<input id="placesText" type="text" name="places" list="places"/>
<button id="caret"> ▼</button>
</div>
<datalist id="places">
<label>Select from the list:
<select name="places" id="select">
<option value="A"></option>
<option value="B"></option>
<option value="C"></option>
</select>
</label>
</datalist>
</div>
</label>
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 have a select element that lays directly up against an input. It looks great for the most part, but there's too much whitespace on some of the options. It seems like unless I set some static width myself, select expands to the width of its largest option.
I want to make it so that the select option only takes up as much width as the currently displayed option. I'd ask if it's possible, but I know it is somehow because I've seen it on Amazon's homepage on their search bar. The behavior of the select that controls their search filter is essentially what I'm trying to recreate on my website, but I can't figure out exactly what they did. Here's the code that reproduces the basic idea of what I've got currently.
HTML:
<select>
<option>All</option>
<option>Consoles</option>
<option>Games</option>
<option>Equipment</option>
</select>
<input type="text" />
CSS:
select {
-moz-appearance: none;
-webkit-appearance: none;
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
border-right: 0;
box-sizing: border-box;
height: 44px;
padding: 10px;
text-align: center;
float: left;
}
input[type='text'] {
height: 44px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 0 4px 4px 0;
margin: 0;
padding: 0 5px;
font-size: 14px;
min-width: 300px;
}
I have a fiddle with everything here as well.
I know I could use JavaScript to make it work, but that would be an absolute last resort in my mind. I want to do it in pure HTML and CSS if I can. Any help is greatly appreciated.
Hope this is the thing that you want exactly. But since the <select> width need to be calculated or determined with another value, it is required some JavaScripts. I used pure jQuery and did some changes to your HTML and CSS.
The answer to your problem is, you need to append your selected option to another select option to get the current option width and keep it until the next change of the select.
HTML:
<div id="main-div">
<select id="resized">
<option value="All">All</option>
<option value="Consoles">Consoles</option>
<option value="Games">Games</option>
<option value="Equipment">Equipment</option>
</select>
<input type="text" />
</div>
<!-- hidden select to calculate the selected option width -->
<select id="hidden_select">
<option id="hidden_select_option"></option>
</select>
CSS:
select {
-moz-appearance: none;
-webkit-appearance: none;
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
border-right: 0;
box-sizing: border-box;
height: 44px;
padding: 10px;
text-align: center;
float: left;
}
input {
height: 44px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 0 4px 4px 0;
margin: 0;
padding: 0 5px;
font-size: 14px;
}
#main-div{
display: none;
width: 375px;
}
#hidden_select {
display: none;
}
jQuery:
$(document).ready(function() {
$('#resized').change();
$("#main-div").css("display", "block");
});
$('#resized').on("change", function(){
$("#hidden_select_option").html($("#resized option:selected").text());
$(this).width($("#hidden_select").width());
//fix the input filed width
var x = $("#main-div").width();
var y = $(this).width() + 21;
$("input").width((x-y) - 12);
});
Note: values 21 and 12 are your padding values and border values of select and input.
Working Code:
https://jsfiddle.net/y82x60fa/10/
Here is the solution with simple jquery. On Amazon's home page is also done with js or other scripting language.
$('#resizingSelectTag').change(function(){
$("#widthTempOption").html($('#resizingSelectTag option:selected').text());
$(this).width($("#selectTagWidth").width());
});
#resizingSelectTag {
width: 50px;
}
#selectTagWidth{
display : none;
}
select {
-moz-appearance: none;
-webkit-appearance: none;
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
border-right: 0;
box-sizing: border-box;
height: 44px;
padding: 10px;
text-align: center;
float: left;
position:absolute;
border-right: 1px solid #ccc;
}
input[type='text'] {
height: 44px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 0 4px 4px 0;
margin: 0;
padding: 0 5px;
font-size: 14px;
min-width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="resizingSelectTag">
<option>All</option>
<option>Lorem Ipsum</option>
<option>Lorem Ipsum is</option>
</select>
<select id="selectTagWidth">
<option id="widthTempOption"></option>
</select>
<input type="text" />
I have a simple select dropdown menu with a significant amount of padding-left and padding-right:
If you click the select input, you'll notice the option tags also have the same amount of padding-left and padding-right applied. However, I want the padding to only apply to the select tag, but not the option tags (i.e. no padding for the option tags).
How can I do this?
select {
width: 400px;
background: lightgray;
padding: 12px 48px;
}
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
From what I know the select box and the dropdown get rendered by the browser engine. This means they are not changeable.
So the only solution is to use a framework (Because of this reason there are many outside) or build one by your own.
If you look in the developer console you will also see that most of the styles of the option element are inherited by the browser and greyed out.
Try This:
$(document).ready(function(){
$('.sel').click(function(){
$('ul').toggle();
})
$('li').click(function(){
$('.sel input[type=text]').val($(this).html());
$('ul').hide();
})
})
* {
box-sizing: border-box;
}
.wrapper {
width: 400px;
position: relative;
cursor: pointer;
}
.sel {
position: relative;
width: inherit;
border: 1px solid #000;
}
.sel input[type="text"]{
width: 100%;
background: lightgray;
padding: 12px 48px;
border-style: none;
outline: none;
cursor: pointer;
}
.sel span {
position: absolute;
right: 25px;
top: 10px;
}
ul {
padding: 0;
margin: 0;
list-style: none;
background: lightgray;
width: 100%;
display: none;
z-index: 999;
}
li {
padding: 10px 0;
}
li:hover {
background-color: skyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="wrapper">
<div class="sel">
<input type="text" readonly="readonly" value="Option1"><span>▼</span>
</div>
<ul>
<li>Option1</li>
<li>Option2</li>
<li>Option3</li>
</ul>
</div>
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.