I'm trying to add an SVG image before the select input box. Here is the code
<select class="rankings_selection" name="" id="">
<option value="">Last 7 days</option>
<option value="">Last 3 days</option>
</select>
This is what I'm trying to achieve
I think you should try styles for custom select
.custom_select {
display: inline-flex;
border: 1px solid black;
border-radius: 8px;
overflow: hidden;
padding: 4px;
}
.rankings_selection {
border: none;
outline: none;
padding: 0;
}
<div class="custom_select">
<img src='https://picsum.photos/24/24' />
<select class="rankings_selection" name="" id="">
<option value="">Last 7 days</option>
<option value="">Last 3 days</option>
</select>
<div>
Related
I have tried it by putting it in class then edit through by accessing the class
I've also tried optgrp but that didn't worked either.
Please see my code below
<style>
select {
width: 300px;
margin: 10px;
font-size:10px;
border:0;
-webkit-appearance: none;
}
select:focus {
min-width: 300px;
width: 300px;
}
</style>
<label for="Department">Choose a Department:</label>
<select name="Select Department" onchange="location = this.value;">
<option value="#">All Departments</option>
<option value="#">Cardiology</option>
<option value="#">Plastic, Cosmatic & Reconstrustive Surgery</option>
<option value="#">Dentistry</option>
</select>
Try this..
<style>
.drpdwn-style{
width: 300px;
margin: 10px;
font-size:10px;
border:0;
-webkit-appearance: none;
}
</style>
<label for="Department">Choose a Department:</label>
<select name="Select Department" class= "drpdwn-style" onchange="location = this.value;">
<option value="#">All Departments</option>
<option value="#">Cardiology</option>
<option value="#">Plastic, Cosmatic & Reconstrustive Surgery</option>
<option value="#">Dentistry</option>
</select>
I have the following code which I wrote:
<div class="selectAorB" *ngIf="this.objects.length > 1">
<div>
<select (change)="this.AorB($event)">
<option value="None" >None</option>
<option value="A" >A</option>
<option value="B" >B</option>
</select>
</div>
</div>
<div class="selectNOT" *ngIf="this.objects.length == 1">
<div>
<select (change)="this.notChange($event)">
<option value="None" >None</option>
<option value="NOT" >NOT</option>
</select>
</div>
</div>
The css:
.selectAorB{
width: 50px;
margin-left: 370px;
margin-top: -41px;
border: 1px solid rgba(88, 109, 140, 0.5);
border-radius: 4px;
padding: 3px;
}
.selectAorB select{
display: block;
width: 50px;
background-image: url('../../../assets/icons/select_arrow.png');
background-repeat: no-repeat;
background-position: right center;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
overflow:hidden;
color: #1A3763;
font-family: Roboto, Arial, Helvetica, sans-serif;
font-weight: normal;
Opacity: 70%;
}
.selectNOT{
width: 50px;
margin-left: 370px;
margin-top: -41px;
border: 1px solid rgba(88, 109, 140, 0.5);
border-radius: 4px;
padding: 3px;
}
.selectNOT select{
display: block;
width: 50px;
background-image: url('../../../assets/icons/select_arrow.png');
background-repeat: no-repeat;
background-position: right center;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
overflow:hidden;
color: #1A3763;
font-family: Roboto, Arial, Helvetica, sans-serif;
font-weight: normal;
Opacity: 70%;
}
Currently, the code adds the selection boxes. If there are multi objects than it will show a box which user can choose None, A or B.
If there is only one object it will add a box which allows to use None or NOT.
The feature I'm trying to implement is to add the second box (None/NOT) beside the first box, in cases there are more than one object, so the HTML should look like:
<div class="selectAorB" *ngIf="this.objects.length > 1">
<div class="selectNOT" *ngIf="this.status == 'NOT'">
<div>
<select (change)="this.notChange($event)">
<option value="None" >None</option>
<option value="NOT" >NOT</option>
</select>
</div>
<br>
</div>
<div>
<select (change)="this.AorB($event)">
<option value="None" >None</option>
<option value="A" >A</option>
<option value="B" >B</option>
</select>
</div>
</div>
<div class="selectNOT" *ngIf="this.objects.length == 1">
<div>
<select (change)="this.notChange($event)">
<option value="None" >None</option>
<option value="NOT" >NOT</option>
</select>
</div>
</div>
But the problem I have is to change the CSS. Every property that I tried to change lead to strange behavior (boxes not in their places). I'm not sure which change I should make so it could work as expected (two boxes one by one). Hoping to hear some guidelines about what to do.
I am not sure that you actually need to have those divs in the first place, but perhaps you need those for something else you intend to do that is out of the context of this question. Also, a lot of your CSS seems unnecessary without seeing the rest of your source, such as the negative margins. So for the sake of simplicity I will ignore all of that.
To get both of the divs containing your selects onto the same line, simple float them with float: left such as in the following example:
.inline {
float: left;
margin-right: 5px;
}
<div class="selectAorB inline">
<div>
<select>
<option value="None" >None</option>
<option value="A" >A</option>
<option value="B" >B</option>
</select>
</div>
</div>
<div class="selectNOT inline">
<div>
<select>
<option value="None" >None</option>
<option value="NOT" >NOT</option>
</select>
</div>
</div>
I have this styled-select dropdown, which shows only 5 options out of all existing options:
<div style="background:grey; height:400px; width: 400px;">
<div class="styled-select">
<select id="campaignListId" name="campaignId" onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=0;' onblur="this.size=0;">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
<option value="5">Fifth</option>
<option value="6">Sixth</option>
<option value="7">Seventh</option>
</select>
</div>
</div>
And this is how my css looks like:
.styled-select select {
position: absolute;
background: transparent;
width: 200px;
padding-top: 5px;
font-size: 32px;
font-weight: bold;
font-family: 'PT Sans', sans-serif;
color: #4F9DD0;
line-height: 1;
border: 0;
border-radius: 4;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
z-index: 2;
}
.styled-select {
background: url(resources/img/campaignSelector.png) no-repeat right #ddd;
background-color: white;
width: 200px;
height: 50px;
position: relative;
margin: 0 auto;
}
.styled-select option {
font-size: 20px;
background-color: white;
}
I want it to act like this picture, I mean when I click on the main box in order to select one option, the window of options open starting from the below of main select box:
But this is what happens, which overlaps the main window:
The problem is with your script
onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=0;' onblur="this.size=0;"
So you can remove it and just hide the extra options using css:
options:nth-child(n+6) {
display:none;
}
Demo:
.styled-select select {
position: absolute;
background: transparent;
width: 200px;
padding-top: 5px;
font-size: 32px;
font-weight: bold;
font-family: 'PT Sans', sans-serif;
color: #4F9DD0;
line-height: 1;
border: 0;
border-radius: 4;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
z-index: 2;
}
.styled-select {
background: url(resources/img/campaignSelector.png) no-repeat right #ddd;
background-color: white;
width: 200px;
height: 50px;
position: relative;
margin: 0 auto;
}
.styled-select option {
font-size: 20px;
background-color: white;
}
option:nth-child(n+6) {
display:none;
}
<div style="background:grey; height:400px; width: 400px;">
<div class="styled-select">
<select id="campaignListId" name="campaignId" >
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
<option value="5">Fifth</option>
<option value="6">Sixth</option>
<option value="7">Seventh</option>
</select>
</div>
</div>
Update
Apparently, you can't hide an option tag using css on Mac OS, so in this case I suggest to use a plugin like select2
$('select').select2({
minimumResultsForSearch: Infinity
});
select {
width:100%;
}
.select2-results__options li:nth-child(n+6) {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<div style="background:grey; height:400px; width: 400px;">
<div class="styled-select">
<select id="campaignListId" name="campaignId" >
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
<option value="5">Fifth</option>
<option value="6">Sixth</option>
<option value="7">Seventh</option>
</select>
</div>
</div>
Keep attention about multiple selects in the same page. In this demo, all of the select's items with index greater than 5 will be invisible.
If you want to hide those options in specific select, you can add class to it and add the selector this class.
Demo:
var con = $('select').select2({
minimumResultsForSearch: Infinity
}).data('select2').$results.addClass("wrap");
select {
width:100%;
}
.wrap.select2-results__options li:nth-child(n+6) {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<div style="background:grey; height:400px; width: 400px;">
<div class="styled-select">
<select id="campaignListId" name="campaignId" >
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
<option value="5">Fifth</option>
<option value="6">Sixth</option>
<option value="7">Seventh</option>
</select>
</div>
</div>
Update 2
Another solution (a little bit pache) that not required a plugin but use javascript (that's the requirement).
The idea is:
button to keep the selected value and will show/hide the select by click.
select with size=5 which be hidden by default and toggle when user click on the button.
In the first click, the select will be displayed.
In the second click, the select will be hidden again and the selected value will by the text in the button.
Demo:
For unknown reason this snippet doesn't work right now, so you can see the effect in this bin
$('button').click(function() {
$('select').toggle();
});
$('select').change(function(){
var sel = $(this).hide();
$('#text-holder').html(sel.val());
}).trigger('change');
.wrapper {
cursor:pointer;
position:relative;
display:inline-block;
}
select {
display:none;
position:absolute;
left:0;
width:100%;
}
button {
text-align:left;
}
#text {
border:1px solid;
width:120px;
}
.arrow {
float:right;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div class="wrapper">
<button id="text">
<span id="text-holder"></span>
<span class="arrow">▼</span>
</button>
<select size="5">
<option selected>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</div>
I tried you code and realized there is something not required for your expected output.
onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=0;' onblur="this.size=0;"
The above shown statement can be removed and it works fine.
I am not sure if this is even possible but we have a normal input with various options nested within it. It has a white background and the drop-down arrow (caret) is on the right. My client has asked me if I can swap the arrow to the left and change it's background colour. So far no luck in changing it, so if anyone can suggest a solution, that would be brilliant!
The code is as below:
<select id="categories"class="form-control" ng-model="type" ng-change="typeChange()">
<option value="silent">Show: Silent</option>
<option value="live">Show: Live</option>
<option value="buy it now">Show: Buy it now</option>
<option value="pledge">Show: Pledge</option>
<option value="sold">Show: Sold</option>
<option value="winning">Show: Winning</option>
<option value="losing">Show: Losing</option>
<option value="favourites">Show: Favourites</option>
<option value="current">Show: Current Bid Amount</option>
<option value="" selected>Show: All</option>
</select>
As you can see it is an angular project, so I am looking for a solution that is ideally 100% CSS or perhaps JS and CSS.
.styled-select #categories {
background: transparent;
width: 268px;
padding: 5px 5px 5px 30px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
.styled-select {
width: 240px;
height: 34px;
overflow: hidden;
background: url(http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg) no-repeat left #ddd;
border: 1px solid #ccc;
}
<div class="styled-select">
<select id="categories" class="form-control" ng-model="type" ng-change="typeChange()">
<option value="silent">Show: Silent</option>
<option value="live">Show: Live</option>
<option value="buy it now">Show: Buy it now</option>
<option value="pledge">Show: Pledge</option>
<option value="sold">Show: Sold</option>
<option value="winning">Show: Winning</option>
<option value="losing">Show: Losing</option>
<option value="favourites">Show: Favourites</option>
<option value="current">Show: Current Bid Amount</option>
<option value="" selected>Show: All</option>
</select>
</div>
Basically the little arrow box is replaced by an image and I set it to the left side of the select box. This was from:
http://bavotasan.com/2011/style-select-box-using-only-css/
And from:
How to customized select element through css?
Brino provided another way to do it, but he left the original little arrow box at the right and the customized one at the left in his example. If you prefer that way you can use direction: rtl and have only 1 container for the select box. Here's his fiddle with the correction.
One solution is to hide the existing arrow, and add a new arrow with the appropriate css. I modified the code from this Answer.
See working example here.
HTML
<label class="custom-select">
<select id="categories" class="form-control" ng-model="type" ng-change="typeChange()">
<option value="silent">Show: Silent</option>
<option value="live">Show: Live</option>
<option value="buy it now">Show: Buy it now</option>
<option value="pledge">Show: Pledge</option>
<option value="sold">Show: Sold</option>
<option value="winning">Show: Winning</option>
<option value="losing">Show: Losing</option>
<option value="favourites">Show: Favourites</option>
<option value="current">Show: Current Bid Amount</option>
<option value="" selected>Show: All</option>
</select>
</label>
CSS
label.custom-select {
position: relative;
display: inline-block;
}
.custom-select select {
padding-left: 20px; /*allows space for new arrow*/
-webkit-appearance: none; /*removes original arrow*/
}
/* Select new arrow styling */
.custom-select:after {
content: "▼";
position: absolute;
top: 0;
left: 80;
height: 100%;
font-size: 60%;
padding: 12px 7px;
background: #000;
color: white;
pointer-events: none;
}
.no-pointer-events .custom-select:after {
content: none;
}
Is it possible to define HTML + CSS such that only a change to the stylesheet is needed to specify whether a choice is represented as a drop-down combobox or a list of radio buttons?
I suspect the answer to this is simply 'no' (which is perfectly acceptable as an answer, if backed up with evidence), but hopefully there's a way.
Do you mean something like this? Not cross-browser and very rough though, you could switch by simply changing the class.
Demo Snippet:
select.radio {
-webkit-appearance: none;
-moz-appearance: none;
border: none; height: 1.5em;
}
select.radio, select.radio:focus { outline: none; }
select.radio > option { display: inline-block; }
select.radio > option::before {
content: '';
display: inline-block;
width: 12px; height: 12px;
border: 1px solid gray; border-radius: 50%;
margin-right: 4px;
vertical-align: top;
}
select.radio > option:checked {
color: #000;
background: -webkit-linear-gradient(#ccc, #ccc);
}
select.radio > option:checked::before {
background-color: #00f;
}
select.normal {
width: 120px;
}
select { margin: 16px; }
<select id="dl1" size="4" class="radio">
<option value="One">One</option>
<option value="Two" selected>Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
</select>
<select id="dl2" size="4" class="normal">
<option value="One">One</option>
<option value="Two" selected>Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
</select>
The answer is sort of "No". You can't redefine a SELECT input a a list of radio buttons. However, you could create two divs with the separtae inputs contained within, and then display or not display based on CSS.
<style>
#divSelect
{
display : none;
}
#divRadio
{
display : block;
}
</style>
<div id="divSelect">
<select id="MyChoice" name="MyChoice" size="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div id="divRadio">
1 <input type="radio" name="MyChoice" value="1"/><br/>
2 <input type="radio" name="MyChoice" value="2"/><br/>
3 <input type="radio" name="MyChoice" value="3"/><br/>
</div>
You can hide one or the other with CSS, but you will have to design your JS (or whatever is receiving this information) more robustly - Check both options and take data from the non-empty one.
Simply make one display and one not
HTML:
<div id="radios">
bar <input type="radio" name="foo" value="bar"/>
barbar <input type="radio" name="foofoo" value="barbar"/>
</div>
<div id="checks">
<select name="bar">
<option value="foo1">foo1</option>
<option value="foo2">foo2</option>
</select>
</div>
CSS:
<style>
#radios{
display:block;
}
#checks{
display:none;
}
</style>
What you can do is style the css for all selects and then change the style for radio buttons.
Kinda like this
select {
font-family: Cursive;
}
input[type=radio ]{
display : inline-block;
margin-left : -28px;
padding-left : 28px;
background : url('checks.png') no-repeat 0 0;
line-height : 24px;
}
here are some links that might help.
http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/
http://css-tricks.com/dropdown-default-styling/