View the snippet or fork from CodePen
<select
data-drupal-selector="edit-field-video-theme-target-id"
id="edit-field-video-theme-target-id"
name="field_video_theme_target_id"
class="form-select"
>
<option value="All" selected="selected">- Tout -</option>
<option value="9">A*midex</option>
<option value="11">Bibliothèque</option>
<option value="10">Relation entreprise</option>
<option value="8">Université</option>
</select>
How can i theme it this way:
is it possible in css ?
You can't style a <option> tag like this, but you can use the select to create another element that is linked to this select tag.
This is similar to what Select2 does:
$(document).ready(function() {
$("[data-selectlist]").each(function() {
//$(this).hide(); //Uncomment this
var $ul = $("<ul/>", {
'class': 'selectlist'
});
$ul.data('select', $(this));
$(this).find('option').each(function() {
var $li = $("<li/>", {
'class': 'selectlist-option',
'data-value': $(this).val(),
'text': $(this).text()
});
$ul.append($li);
});
$(this).after($ul);
$ul.on('click', '.selectlist-option', function() {
var $selectlist = $(this).closest('.selectlist');
$selectlist.find('.selectlist-option').removeClass('active');
$(this).addClass('active');
$($selectlist.data('select')).val($(this).data('value'));
})
});
})
.selectlist {
list-style: none;
padding-left: 0;
display: inline-block;
}
.selectlist .selectlist-option {
padding: 10px;
border: 1px solid #ccc;
cursor: pointer;
}
.selectlist .selectlist-option.active {
background: #0fc0fc;
}
.selectlist .selectlist-option:hover {
background: #0fd0fd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-selectlist data-drupal-selector="edit-field-video-theme-target-id" id="edit-field-video-theme-target-id" name="field_video_theme_target_id" class="form-select">
<option value="All" selected="selected">- Tout -</option>
<option value="9">A*midex</option><option value="11">Bibliothèque</option>
<option value="10">Relation entreprise</option>
<option value="8">Université</option>
</select>
Codepen link: https://codepen.io/anon/pen/geGQvR
Related
I want to create a div which color depends on two select input. The soil_colour1 and soil_colour2 will determined the colour of the div(colorbox).
below are my current code:
<select name="soil_colour" id="soil_colour1">
<option value="dark">Dark</option>
<option value="medium">Medium</option>
<option value="light">Light</option>
<option value="pale">Pale</option>
</select>
<select name="soil_colour" id="soil_colour2">
<option value="grey">Grey</option>
<option value="purple">Purple</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="brown">Brown</option>
<option value="orange">Orange</option>
<option value="yellow">Yellow</option>
<option value="red">Red</option>
</select>
<div id="colorbox" style="background-color: #FFFFFF7F ; padding: 10px; border: 1px; width: 23%">
</div>
the example script that i had in mind
<script type="text/javascript">
function findColor()
{
if (document.getElementById('soil_colour1').value = 'dark')
{
if (document.getElementById('soil_colour2').value = 'grey')
{
document.getElementById('colorbox').style.background-color = '#4F4E50'
}
}
}
</script>
In your colorbox definition you put the background color in hey with transparency. It's working well now in browser in easier to combine.
If you make a console log with your background color, browser will give you a rgb (or rgba) value. You can have a function to convert rgb to hex, if you search here you'll find this question. But here, I made the snippet with hex value, faster, shorter.
Because browser will give you rgb, I'm using data attribute to store the full hex current color background in colorbox.
For HTML color name in hex, look here:
https://www.w3schools.com/colors/colors_names.asp
For transparency in hex, look here:
Hex transparency in colors
document.querySelector('#soil_colour1').addEventListener('change', evt => {
const elcolbox = document.querySelector('#colorbox');
const color = elcolbox.dataset.bkgcol.slice(0, -2);
elcolbox.dataset.bkgcol = color + evt.target.value;
elcolbox.style.backgroundColor = color + evt.target.value;
})
document.querySelector('#soil_colour2').addEventListener('change', evt => {
const elcolbox = document.querySelector('#colorbox');
const transparency = document.querySelector('#colorbox').dataset.bkgcol.slice(-2);
elcolbox.dataset.bkgcol = evt.target.value + transparency;
elcolbox.style.backgroundColor = evt.target.value + transparency;
})
<select name="soil_colour" id="soil_colour1">
<option value="E6">Dark</option>
<option value="99">Medium</option>
<option value="66">Light</option>
<option value="33">Pale</option>
</select>
<select name="soil_colour" id="soil_colour2">
<option value="#808080">Grey</option>
<option value="#800080">Purple</option>
<option value="#0000FF">Blue</option>
<option value="#008000">Green</option>
<option value="#A52A2A">Brown</option>
<option value="#FFA500">Orange</option>
<option value="#FFFF00">Yellow</option>
<option value="#FF0000">Red</option>
</select>
<div id="colorbox" style="background-color: #FF0000FF ; padding: 10px; border: 1px; width: 23%" data-bkgcol="#FF0000FF">
</div>
One strategy to achieve that result could be to control the color value using the HSL model and definining the map of colors (weight+colorname = color to set the css background property) as css classes addressing the color weight by setting the lightness and the color name setting the hue and saturation.
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
In this demo I have the weight category of classes defined starting with lightness-* and the color name category of classes defined as color-*.
In this way you can define the color map using a css asset instead of dealing with js configuration.
Each of those classes just control the css custom variables: --hue, --saturation, --lightness
Those variable are used by the master css rule assigned to the target element that you wish to style with the given color as background:
.custom-background-color {
background: hsl(var(--hue) var(--saturation) var(--lightness));
}
Notes: The demo expects a target object to be the subject of the styling but since we had that custom-background-color class it could be a criteria to deduce which objects are supposed to be styled like that without having to pass a specific element fetched in advance
Then the javascript code just adds a change event listener on both the dropdowns controlling respectively the color weight and name by adding the respective classes to the target element after any were first unset.
The name of the weight and colorname classes to add to the element are a function of the values coming from the dropdown.
const colorbox = document.getElementById('colorbox');
const colorName = document.getElementById('color_name');
const colorWeight = document.getElementById('color_weight');
colorName.addEventListener('change', onColorPicked);
colorWeight.addEventListener('change', onColorPicked);
onColorPicked();
function onColorPicked(){
clearColor(colorbox);
setColor(colorbox, colorName.value, colorWeight.value);
}
//sets the background color for target as name, weight
function setColor(target, name, weight) {
target.classList.add(`color-${name}`, `lightness-${weight}`);
}
//removes the class color-* and lightness-* if any
function clearColor(target){
[...target.classList].forEach( className => {
if (
className.startsWith('color-') ||
className.startsWith('lightness-')) {
target.classList.remove(className);
}
});
}
*{
box-sizing: border-box;
}
body{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 15% 70%;
gap: 1em;
padding: .5em;
height: 95vh;
}
select{
cursor: pointer;
}
#colorbox {
padding: 10px;
width: 100%;
margin-top: .5em;
grid-column: span 2;
height: 100%;
}
.custom-background-color {
--hue: 100;
--saturation: 100%;
--lightness: 100%;
background: hsl(var(--hue) var(--saturation) var(--lightness));
}
/* lightness */
.lightness-dark {
--lightness: 10% !important;
}
.lightness-medium {
--lightness: 30% !important;
}
.lightness-light {
--lightness: 50% !important;
}
.lightness-pale {
--lightness: 70% !important;
}
/* colors */
.color-grey {
--hue: 0;
--saturation: 0%;
}
.color-purple {
--hue: 270;
--saturation: 100%;
}
.color-blue {
--hue: 240;
--saturation: 100%;
}
.color-green {
--hue: 120;
--saturation: 100%;
}
.color-brown {
--hue: 30;
--saturation: 50%;
}
.color-orange {
--hue: 30;
--saturation: 100%;
}
.color-yellow {
--hue: 60;
--saturation: 100%;
}
.color-red {
--hue: 0;
--saturation: 100%;
}
<select id="color_weight">
<option value="dark">Dark</option>
<option value="medium">Medium</option>
<option value="light">Light</option>
<option value="pale" selected>Pale</option>
</select>
<select id="color_name">
<option value="grey">Grey</option>
<option value="purple">Purple</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="brown">Brown</option>
<option value="orange">Orange</option>
<option value="yellow">Yellow</option>
<option value="red" selected>Red</option>
</select>
<div id="colorbox" class="custom-background-color">
</div>
Is it possible to change the default background color of a select list option on hover?
HTML:
<select id="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
I have tried option:hover { background-color: red; }, but it is of no use. Does anybody know how to do this?
This can be done by implementing an inset box shadow.
eg:
select.decorated option:hover {
box-shadow: 0 0 10px 100px #1882A8 inset;
}
Here, .decorated is a class assigned to the select box.
Hope you got the point.
Select / Option elements are rendered by the OS, not HTML. You cannot change the style for these elements.
This way we can do this with minimal changes :)
option:hover {
background-color: yellow;
}
<select onfocus='this.size=10;' onblur='this.size=0;' onchange='this.size=1; this.blur();'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
Implementing an inset box shadow CSS works on Firefox:
select option:checked,
select option:hover {
box-shadow: 0 0 10px 100px #000 inset;
}
Checked option item works in Chrome:
select:focus > option:checked {
background: #000 !important;
}
There is test on https://codepen.io/egle/pen/zzOKLe
For me this is working on
Google Chrome
Version 76.0.3809.100 (Official Build) (64-bit)
Newest article I have found about this issue by Chris Coyier (Oct 28, 2019) https://css-tricks.com/the-current-state-of-styling-selects-in-2019/
The problem is that even JavaScript does not see the option element being hovered. This is just to put emphasis on how it's not going to be solved (any time soon at least) by using just CSS:
window.onmouseover = function(event)
{
console.log(event.target.nodeName);
}
The only way to resolve this issue (besides waiting a millennia for browser vendors to fix bugs, let alone one that afflicts what you're trying to do) is to replace the drop-down menu with your own HTML/XML using JavaScript. This would likely involve the use of replacing the select element with a ul element and the use of a radio input element per li element.
Select / Option elements are rendered by the OS/Client, not HTML.
You cannot change the style for these elements in modern Browser.
On older clients
select option:checked,
select option:hover {
box-shadow: 0 0 10px 100px #000 inset;
}
Checked option item works in older Chrome:
select:focus > option:checked {
background: #000 !important;
}
Adding/toggling size attributes on focus event as suggestest by #Krishnaraj works pretty well on desktop using mouse controls.
However, the previous answers don't work well with keyboard controls.
The following example wraps the aforementioned state toggling into a javaScript helper function and adds additional event listeners for better accessibility
setSelectHover();
function setSelectHover(selector = "select") {
let selects = document.querySelectorAll(selector);
selects.forEach((select) => {
let selectWrap = select.parentNode.closest(".select-wrap");
// wrap select element if not previously wrapped
if (!selectWrap) {
selectWrap = document.createElement("div");
selectWrap.classList.add("select-wrap");
select.parentNode.insertBefore(selectWrap, select);
selectWrap.appendChild(select);
}
// set expanded height according to options
let size = select.querySelectorAll("option").length;
// adjust height on resize
const getSelectHeight = () => {
selectWrap.style.height = "auto";
let selectHeight = select.getBoundingClientRect();
selectWrap.style.height = selectHeight.height + "px";
};
getSelectHeight(select);
window.addEventListener("resize", (e) => {
getSelectHeight(select);
});
/**
* focus and click events will coincide
* adding a delay via setTimeout() enables the handling of
* clicks events after the select is focused
*/
let hasFocus = false;
select.addEventListener("focus", (e) => {
select.setAttribute("size", size);
setTimeout(() => {
hasFocus = true;
}, 150);
});
// close select if already expanded via focus event
select.addEventListener("click", (e) => {
if (hasFocus) {
select.blur();
hasFocus = false;
}
});
// close select if selection was set via keyboard controls
select.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
select.removeAttribute("size");
select.blur();
}
});
// collapse select
select.addEventListener("blur", (e) => {
select.removeAttribute("size");
hasFocus = false;
});
});
}
body {
font-size: 10vmin;
}
select {
--selectHoverCol: #999;
--selectedCol: red;
width: 100%;
font-size: 1em;
padding: 0.3em;
background-color: #fff;
}
select:focus {
border-radius: 0px;
border-color: red;
background: #fff;
outline: none;
}
.select-wrap {
position: relative;
}
.select-wrap:focus-within select {
position: absolute;
top: 0;
left: 0;
z-index: 10
}
option:hover {
background-color: var(--selectHoverCol);
color: #fff;
}
option:checked {
box-shadow: 0 0 1em 100px var(--selectedCol) inset;
}
<select class="selectHovercolor">
<option value="volvo" selected>Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<p>paragraph</p>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="Lexus">Lexus</option>
<option value="Mercedes">Mercedes</option>
</select>
<p>paragraph</p>
The select field is wrapped in a <div> with relative position.
:focus-within pseudo state toggles the select positioning between absolute and initial (static) – this way we can avoid layout shifts.
the wraping div height is recalculated on resize
since the focus event coincides with with the click event, we add a delay for click events, triggering the select field to collapse after selection
If an option was selected via keyboard controls and selection was confirmed by pressing "enter" - the size attribute is removed.
size attribute is set according to the actual number of <option> elements
You can do this, just know that it will change all of the select inputs throughout the html, it doesn't change the blue hover, but it does style everything else.
option {
background: #1b1a1a !important;
color: #357b1d !important;
}
select {
background: #1b1a1a !important;
color: #357b1d !important;
}
// If you also want to theme your text inputs:
input {
background: #1b1a1a !important;
color: #357b1d !important;
}
<html>
<head>
<style>
option:hover {
background-color: yellow;
}
</style>
</head>
<body>
<select onfocus='this.size=10;' onblur='this.size=0;' onchange='this.size=1; this.blur();'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
This worked for me in chrome!
<select onfocus='this.size=10;'>
<option>Crossing</option>
<option>Crossing Up</option>
<option>Crossing Down</option>
</select>
<style>
select option:hover {
box-shadow: 0 0 10px 100px green inset;
color:white;
}
select option:checked{
box-shadow: 0 0 10px 100px green inset;
}
</style>
However, the checked option's background will remain same even if i hover on another option
By the way, you can do that one as well.
Here is the link for that: https://www.w3schools.com/howto/howto_custom_select.asp
I would consider switching from a <select> element to a <div> list, like below:
https://jsfiddle.net/getbutterfly/gquh02dz/
This will make it cross-browser compatible. Every other method using CSS appearance tricks and <select> dropdowns is hacky.
HTML
<div class="sel">
<div class="label">Select option...</div>
<div class="options">
<div>Option 1</div>
<div>Option 2</div>
<div>Option 3</div>
<div>Lot of text to display, so it can expand multiple lines and expand the select main text also</div>
</div>
</div>
JavaScript
const sel = document.querySelector('.sel');
const label = document.querySelector('.label');
const options = document.querySelector('.options');
options.setAttribute('hidden', true);
sel.addEventListener('click', (e) => {
e.stopPropagation();
options.removeAttribute('hidden');
});
document.body.addEventListener('click', (e) => {
options.setAttribute('hidden', true);
});
options.addEventListener('click', (e) => {
if (e.target.tagName === 'DIV') {
e.stopPropagation();
label.textContent = e.target.textContent;
e.target.classList.add('selected');
Array.from(e.target.parentNode.children).forEach((child) => {
if (child !== e.target) {
child.classList.remove('selected');
}
});
options.setAttribute('hidden', true);
}
});
CSS
* {
box-sizing: border-box;
}
.sel {
color: #000000;
width: 250px;
box-sizing: border-box;
background-color: #ffffff;
border: 1px solid #000000;
overflow: hidden;
background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat calc(100% - 10px) 14px;
}
.label,
.sel .options div {
padding: 10px;
}
.selected {
background-color: #ff0000;
}
.sel .options {
width: 250px;
background-color: #ffffff;
}
.sel .options div:hover {
background-color: #00ff00;
}
With a bit of extra CSS, the dropdown can be animated and the selected text can be truncated to fit inside a fixed height, behaving exactly like a <select> element.
I realise this is an older question, but I recently came across this need and came up with the following solution using jQuery and CSS:
jQuery('select[name*="lstDestinations"] option').hover(
function() {
jQuery(this).addClass('highlight');
}, function() {
jQuery(this).removeClass('highlight');
}
);
and the css:
.highlight {
background-color:#333;
cursor:pointer;
}
Perhaps this helps someone else.
this is what you need, the child combinator:
select>option:hover
{
color: #1B517E;
cursor: pointer;
}
Try it, works perfect.
Here's the reference: http://www.w3schools.com/css/css_combinators.asp
I have this sample:
link
CODE HTML:
<select name="card_type" id="card_type" class="select-full">
<option value="">Select</option>
<option value="visa">Visa</option>
<option value="mastercard">Mastercard</option>
<option value="discovery">Discovery</option>
<option value="maestro">Maestro</option>
</select>
CODE CSS:
select
{
color: #ccc;
}
option
{
color: #000;
}
option:first-child
{
color: red;
}
I have a wish to spot and select only the first item in the list.
The first element to be red and the other to be gray for example.
Is there any possibility to do this?
I tried the above code but does not work. Can you please tell me what is wrong?
Thanks in advance!
I have made changes in snippet. Please check it.
is this the way you want?
$(document).ready(function(){
if($(this).val() == 0){
$('select').css("color","red");
}
else{
$('select').css("color","#000")
}
$('select').change(function(){
if($(this).val() == 0){
$('select').css("color","red");
}
else{
$('select').css("color","#000")
}
})
})
select
{
color: #ccc;
}
option
{
color: #000;
}
option:first-child
{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="card_type" id="card_type" class="select-full">
<option value="0">Select</option>
<option value="visa">Visa</option>
<option value="mastercard">Mastercard</option>
<option value="discovery">Discovery</option>
<option value="maestro">Maestro</option>
</select>
Try this:
select:first-child{color: red;}
Use nth-of-type(1)
option:nth-of-type(1)
{
color: red;
}
Well assuming something.
I think you want your <option value="visa">Visa</option> to color red but note that this is second option so use this css
select.select-full option:nth-child(2){
color:red;
}
fiddle link :https://jsfiddle.net/yudi/L439rrsd/
Here is a screenshot. Normally google maps returns the lat lng values of the step of the journey. Now all it is retuning is function() . How do i solve?
I haven't change any of my code, why aren't the lat lng values being returned?
So based on Google Maps API reference(https://developers.google.com/maps/documentation/javascript/3.exp/reference#DirectionsService), the start_location returns a <LatLng> type. A LatLng class has lat() and lng() method for you to get the lat/lng values in number.
Those values of google.maps.LatLng type, you could use
lat() / lng() functions to get latitude/longitude values or toString()/ toUrlValue() to get string representation.
The following example shows how to print route information including lat & lng properties of google.maps.LatLng from Directions Service response
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: { lat: 41.85, lng: -87.65 }
});
directionsDisplay.setMap(map);
var onChangeHandler = function () {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
travelMode: google.maps.TravelMode.DRIVING
}, function (response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
if(response.routes.length > 0)
printRoute(response.routes[0]);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
function printRoute(route)
{
var json = JSON.stringify(route, convertLatLngValue, 2);
document.getElementById('output').innerHTML = json;
}
function convertLatLngValue(key,value)
{
if (key=="lat" || key=="lng") {
return value();
}
else
return value;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#map-container {
width: 64.9%;
height: 100%;
margin-left: auto;
margin-right: auto;
position: relative;
float: right;
z-index: 0;
}
#panel {
float: left;
width: 35%;
height: 400px;
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
outline: 1px solid rgba(0,0,0,0.2);
z-index: 100;
overflow: auto;
}
<div id="panel">
<pre id="output"></pre>
</div>
<div id="map-container">
<div id="floating-panel">
<b>Start: </b>
<select id="start">
<option value="chicago, il">Chicago</option>
<option value="st louis, mo">St Louis</option>
<option value="joplin, mo">Joplin, MO</option>
<option value="oklahoma city, ok">Oklahoma City</option>
<option value="amarillo, tx">Amarillo</option>
<option value="gallup, nm">Gallup, NM</option>
<option value="flagstaff, az">Flagstaff, AZ</option>
<option value="winona, az">Winona</option>
<option value="kingman, az">Kingman</option>
<option value="barstow, ca">Barstow</option>
<option value="san bernardino, ca">San Bernardino</option>
<option value="los angeles, ca">Los Angeles</option>
</select>
<b>End: </b>
<select id="end" >
<option value="chicago, il">Chicago</option>
<option value="st louis, mo">St Louis</option>
<option value="joplin, mo">Joplin, MO</option>
<option value="oklahoma city, ok">Oklahoma City</option>
<option value="amarillo, tx">Amarillo</option>
<option value="gallup, nm">Gallup, NM</option>
<option value="flagstaff, az">Flagstaff, AZ</option>
<option value="winona, az">Winona</option>
<option value="kingman, az">Kingman</option>
<option value="barstow, ca">Barstow</option>
<option value="san bernardino, ca">San Bernardino</option>
<option value="los angeles, ca">Los Angeles</option>
</select>
</div>
<div id="map"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
I am really confuded in this. I have a label and select drop-down inside my container which is right aligned.
GOAL
Container should act like a drop-down. Only sort-by label should be displayed initially.When user clicks on it, it should shoe the option to the user.
Problem
I don't know how to trigger drop down when i click on the sort by label.
<div class="container">
<label class="Sortlabel">Sort by</label>
<select>
<option>2</option>
<option>22</option>
<option>222</option>
</select>
</div>
If i must use jquery or JS, i ll add these tags also. Any suggestions??
And what is the difference with this one : http://jsfiddle.net/csdtesting/vuc81u87/
Result is the same.
<div class="container">
<label class="Sortlabel"></label>
<select>
<option>Sort by</option>
<option>22</option>
<option>222</option>
</select>
</div>
select
{
width:100%;
-webkit-appearance: none;
}
.container
{
float: right;
width:190px;
}
But if you insists.I took this idea
and here it is (Pure Javascript): http://jsfiddle.net/csdtesting/ybjdsqrx/
var state = false;
// <select> element displays its options on mousedown, not click.
showDropdown = function(element) {
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
element.dispatchEvent(event);
};
// This isn't magic.
window.runThis = function() {
var dropdown = document.getElementById('sel');
showDropdown(dropdown);
};
select {
-webkit-appearance: none;
border: none;
width: 70%;
}
.container {
width: 100%;
float: left;
width: 190px;
border: 1px solid;
}
.Sortlabel {
width: 20%;
}
}
<div class="container">
<label class="Sortlabel" onclick="runThis()">Sort by</label>
<select id="sel">
<option></option>
<option>2</option>
<option>22</option>
<option>222</option>
</select>
</div>