change color when hovering over option

change color when hovering over option - javascript

I made a select with javascript and filled its options with an array. Afterwards I wrote some jquery to try and change the backgroundColor of the option when I hover over it, but nothing seems to work. everytime I hover over the options they are still highlighted blue.
I'm new to javascript and jquery and this is an idea that I had of why this happens: could this be because there is a standard hover function in a select that will always override mine or am I really overlooking a mistake? Because I tested my code before on divs and the code worked like a charm here
My code:
//arraycommObjName is an array with 4 elements to fill my selection
//$('#commObjs') is my select
for (i=0; i < arraycommObjName.length; i++) {
$('#commObjs').append($('<option class="testoptions"></option>').attr("value", arrayCommObjID[i]).text(arraycommObjName[i]));
}
$(".testoptions").hover(function(e) {
$(this).css("background-color",e.type === "mouseenter"?"green":"red")
})
take note yes I know it's better to do this with css but it is asked to me to do it with only javascript and jquery.

You can use select2 and add some CSS to override the default styles.
Below is an example with some horrific colors to prove you can override the default select2 white and blue colors.
$("#states").select2();
#states {
width: 300px;
}
.select2-results__option {
color: orange;
background-color: seashell;
}
.select2-results__option--highlighted {
color: white !important;
background-color: darkgreen !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: darkgray;
}
<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.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select id="states">
<option value="">Select...</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</select>

Related

Select is invisible because of linear-gradient in Chrome

I have a select box and I use a linear gradient as a background. In Firefox everything works fine, but in Chrome, I have to hover to see the options because the text is white and the background is white too. See the image bellow:
I'm think in removing the linear gradient, because I can't use jQuery, Javascript or PHP is OK. Someone knows the best way to solve this?
Here is a codepen to help.
select {
color: #fff;
background-color: #12964f;
background: linear-gradient(#4eba71, #12964f);
}
<select name="" id="">
<option value="">first value</option>
<option value="">second value</option>
<option value="">third value</option>
</select>

select {
color: #fff;
background-color: #12964f;
background: linear-gradient(#4eba71, #12964f);
}
select option {
color: #000;
}
<select name="" id="">
<option value="">first value</option>
<option value="">second value</option>
<option value="">third value</option>
</select>
You can add color:#000 to the options, which won't affect the selected option.
http://codepen.io/anon/pen/GWBOqx

How do i change the color of the buttons html/javascript [duplicate]

How do you set the background color of an item in an HTML list?

select.list1 option.option2
{
background-color: #007700;
}
<select class="list1">
<option value="1">Option 1</option>
<option value="2" class="option2">Option 2</option>
</select>

I assume you mean the <select> input element?
Support for that is pretty new, but FF 3.6, Chrome and IE 8 render this all right:
<select name="select">
<option value="1" style="background-color: blue">Test</option>
<option value="2" style="background-color: green">Test</option>
</select>

I had this problem too. I found setting the appearance to none helped.
.class {
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
background-color: red;
}

Just like normal background-color: #f0f
You just need a way to target it, eg: <option id="myPinkOption">blah</option>

change the font size of the selected value after it is being select in select element of html

I want to change the font of selected value in the select tag after the value has been selected .
Following is the code for my html
<select class="form-control" id="session-select">
<option value="SELECT SESSION NUMBER" disabled selected>SELECT SESSION NUMBER</option>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
Following is the CSS
select{
border:none !important;
box-shadow: none;
font-family: $lgr;
font-size: 35px;
height: 54px;
#media (min-width: $mobile) and (max-width: $mobile-max){
/* Media Query Between Screen 320px and 480px */
font-size: 30px;
}

Not sure you can change the different font-size of option tags, but you can change color and background of selected option like in below demo.
Here is the DEMO http://jsfiddle.net/yeyene/99h7m/1/
Jquery
$('#session-select').on('change', function(){
var val = $(this).val();
$(this).find('option[value='+val+']').css({
'color':'red',
'background':'#e8e8e8'
});
});

I attempted this in the following way and it worked for me:
Html Part:
<select class="form-control" id="session-select">
<option value="SELECT SESSION NUMBER" disabled selected id="selectedDd">SELECT SESSION NUMBER</option>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
Jquery Part:
<script>
$(document).ready(function () {
$("#session-select").change(function () {
$("#session-select option").removeAttr("id");
var selected = $("#session-select option[value=" + $(this).val() + "]").attr('id','selectedDd');
});
});
</script>
Css Part:
<style type="text/css">
#session-select,#selectedDd {font-size:large!important; }
option:not(#session-select){ font-size:small; }
</style>

Select2 start with input field instead of dropdown

I use the js library select2. This is a screenshot of what I have now:
Start:
Click on dropdown:
Now is it possible to have an input field to start with and not directly a dropdownlist? I know it's possible because you can find it on the select2 site. An example is this:
But the documentation is very brief. This is what I have now:
<input type="text" name="questions[question1]" id="question1" class="question1" style="width:500px"/>
function createQuestionTags(data, question_number){
$(".question" + question_number).select2({
createSearchChoice: function (term, data) {
if ($(data).filter(function () {
return this.text.localeCompare(term) === 0;
}).length === 0) {
return {
id: term,
text: term
};
}
},
data: data,
placeholder: "Enter Question",
allowClear:true
});
}
(The data is received from an ajax call)

What you are seeing is actually a multi-select or multi-value drop down box in that example. It is not a single value drop down box like you are using in your code. Per the Select2 website, select2 will detect that you are trying to use a multi-select box and will automatically apply that styling instead of the default (drop down arrow, etc.).
If you in fact need a single value drop down box, there is no direct way to make it display with the formatting of the multi-select so that it looks like a regular input box. There may be a way to fake it by adding or removing CSS classes. I played around a bit but couldn't find one.
Since you don't want the formatting, the search box, or the multi-select capability (I'm assuming) you probably don't need to use the select2 library.
Update: It looks like you're not the first person to try to do this. They plan to add this feature but it might be a while:
https://github.com/ivaynberg/select2/issues/1345

The only workaround that I could come up with is to use both multiple: true and maximumSelectionSize: 1 when setting up.
Please see my example here: http://jsfiddle.net/DanEtchy/Lnf8j/

This is possible in Select2 4.0.0 with the new selection adapters. You can swap out the SingleSelection with a MultipleSelection (including any relevant decorators) and it should behave as expected.
$.fn.select2.amd.require([
'select2/selection/multiple',
'select2/selection/search',
'select2/dropdown',
'select2/dropdown/attachBody',
'select2/dropdown/closeOnSelect',
'select2/compat/containerCss',
'select2/utils'
], function (MultipleSelection, Search, Dropdown, AttachBody, CloseOnSelect, ContainerCss, Utils) {
var SelectionAdapter = Utils.Decorate(
MultipleSelection,
Search
);
var DropdownAdapter = Utils.Decorate(
Utils.Decorate(
Dropdown,
CloseOnSelect
),
AttachBody
);
$('.inline-search').select2({
dropdownAdapter: DropdownAdapter,
selectionAdapter: SelectionAdapter
});
$('.dropdown-search').select2({
selectionAdapter: MultipleSelection
});
$('.autocomplete').select2({
dropdownAdapter: DropdownAdapter,
selectionAdapter: Utils.Decorate(SelectionAdapter, ContainerCss),
containerCssClass: 'select2-autocomplete'
});
});
.select2-selection__choice__remove {
display: none !important;
}
.select2-container--focus .select2-autocomplete .select2-selection__choice {
display: none;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
<p>With an inline search box</p>
<select style="width: 200px" class="inline-search">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
<p>With the search box in the dropdown</p>
<select style="width: 200px" class="dropdown-search">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
<p>With the selection hidden when it is focused</p>
<select style="width: 200px" class="autocomplete">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
By default, Select2 will set up the dropdown to have the search (instead of the selection container) which you will need to override if you want to perfectly emulate a multiple select.

Instead of Select2 the better choice would be selectize because Select2 seems dead
The usage is easy:
$('select').selectize(options);
Here is number of examples how to use and customize selectize

In my case, I wanted the user's selections from the dropdown to appear in a list below the dropdown, rather than working like a regular dropdown list. So this workaround worked for me:
$('#myselect').select2({
multiple:true
})
.on('select2:select', function (e) {
//clear the input box after a selection is made
$(this).val([]).trigger('change');
});
Of course that won't work if you want the selected item to stay selected in select2's input box like it does with a regular select2 multiselect list.

Custom implementation using Bootstrap styling, simple but functional:
var elements = $(document).find('select.form-control');
for (var i = 0, l = elements.length; i < l; i++) {
var $select = $(elements[i]), $label = $select.parents('.form-group').find('label');
$select.select2({
allowClear: false,
placeholder: $select.data('placeholder'),
minimumResultsForSearch: 0,
theme: 'bootstrap',
width: '100%' // https://github.com/select2/select2/issues/3278
});
// Trigger focus
$label.on('click', function (e) {
$(this).parents('.form-group').find('select').trigger('focus').select2('focus');
});
// Trigger search
$select.on('keydown', function (e) {
var $select = $(this), $select2 = $select.data('select2'), $container = $select2.$container;
// Unprintable keys
if (typeof e.which === 'undefined' || $.inArray(e.which, [0, 8, 9, 12, 16, 17, 18, 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 44, 45, 46, 91, 92, 93, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 123, 124, 144, 145, 224, 225, 57392, 63289]) >= 0) {
return true;
}
// Already opened
if ($container.hasClass('select2-container--open')) {
return true;
}
$select.select2('open');
// Default search value
var $search = $select2.dropdown.$search || $select2.selection.$search, query = $.inArray(e.which, [13, 40, 108]) < 0 ? String.fromCharCode(e.which) : '';
if (query !== '') {
$search.val(query).trigger('keyup');
}
});
// Format, placeholder
$select.on('select2:open', function (e) {
var $select = $(this), $select2 = $select.data('select2'), $dropdown = $select2.dropdown.$dropdown || $select2.selection.$dropdown, $search = $select2.dropdown.$search || $select2.selection.$search, data = $select.select2('data');
// Above dropdown
if ($dropdown.hasClass('select2-dropdown--above')) {
$dropdown.append($search.parents('.select2-search--dropdown').detach());
}
// Placeholder
$search.attr('placeholder', (data[0].text !== '' ? data[0].text : $select.data('placeholder')));
});
}
/* !important not needed with less */
.form-group {
padding: 25px;
}
.form-group.above {
position: absolute;
bottom: 0; left: 0; right: 0;
}
.select2-container--open .select2-selection {
box-shadow: none!important;
}
.select2-container--open .select2-selection .select2-selection__arrow {
z-index: 9999; /* example */
}
.select2-dropdown {
/* .box-shadow(#form-control-focus-box-shadow); (from select2-boostrap */
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
/* border-color: #input-border-focus; */
border-color: #66afe9;
border-top-width: 1px!important;
border-top-style: solid!important;
/* border-top-left-radius: #input-border-radius; */
border-top-left-radius: 4px!important;
/* border-top-right-radius: #input-border-radius; */
border-top-right-radius: 4px!important;
/* margin-top: -#input-height-base; */
margin-top: -34px!important;
}
.select2-dropdown .select2-search {
padding: 0;
}
.select2-dropdown .select2-search .select2-search__field {
/* !important not needed using less */
border-top: 0!important;
border-left: 0!important;
border-right: 0!important;
border-radius: 0!important;
/* padding: #padding-base-vertical #padding-base-horizontal; */
padding: 6px 12px;
/* height: calc(#input-height-base - 1px); */
height: 33px;
}
.select2-dropdown.select2-dropdown--above {
/* border-bottom: 1px solid #input-border-focus; */
border-bottom: 1px solid #66afe9!important;
/* border-bottom-left-radius: #input-border-radius; */
border-bottom-left-radius: 4px!important;
/* border-bottom-right-radius: #input-border-radius; */
border-bottom-right-radius: 4px!important;
/* margin-top: #input-height-base; */
margin-top: 34px!important;
}
.select2-dropdown.select2-dropdown--above .select2-search .select2-search__field {
/* border-top: 1px solid #input-border; */
border-top: 1px solid #66afe9!important;
border-bottom: 0!important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet"/>
<link href="https://select2.github.io/select2-bootstrap-theme/css/select2-bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script>
<div class="form-group">
<label class="control-label">Below example (click label to focus)</label>
<select class="form-control" id="select2-single-box" name="select2-single-box" data-placeholder="Pick your choice" data-tabindex="1">
<option></option>
<option value="1">First choice</option>
<option value="2">Second choice</option>
<option value="3">Third choice</option>
<option value="4">Fourth choice</option>
<option value="5">Fifth choice</option>
<option value="6">Sixth choice</option>
<option value="7">Seventh choice</option>
<option value="8">Eighth choice</option>
<option value="9">Ninth choice</option>
</select>
</div>
<div class="form-group above">
<label class="control-label">Above example (click label to focus)</label>
<select class="form-control" id="select2-single-box" name="select2-single-box" data-placeholder="Pick your choice" data-tabindex="2">
<option></option>
<option value="1">First choice</option>
<option value="2">Second choice</option>
<option value="3">Third choice</option>
<option value="4">Fourth choice</option>
<option value="5">Fifth choice</option>
<option value="6">Sixth choice</option>
<option value="7">Seventh choice</option>
<option value="8">Eighth choice</option>
<option value="9">Ninth choice</option>
</select>
</div>
Select2's minimumInputLength: 1 option can hide the dropdown on focus/open...
Update: Code cleanup, don't open dropdown on focus.

Use these properties
$('#placeSelect').select2({
width: '100%',
allowClear: true,
multiple: true,
maximumSelectionSize: 1,
});
just call this function on onchange event of dropdown
function ResentForMe(){
var _text=$('.select2-selection__rendered li:first-child').attr('title');
$('.select2-selection__rendered li:first-child').remove();
$('.select2-search__field').val(_text);
$('.select2-search__field').css('width','100%');
}
Note: Remove "Multiple" attribute from select

dudes, add some CSS anywhere:
.select2-dropdown--below {
margin-top: -33px !important;
border-radius: 4px !important;
}
just try it! ;)

Matt,)
this work
$('.search-town-flat').select2({
multiple: true,
placeholder: "Enter values",
allowClear: true,
maximumSelectionLength: 2,
theme : "classic"
}).on('select2:select', function (e) {
$(this).val([]).trigger('change');
$(this).val([e.params.data.id]).trigger("change");
});

I simply formatted a standard input box with CSS to look like a Select2() dropdown:
input {
width: 100%;
padding: 7px 5px;
margin: 1px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

$.fn.select2.amd.require([
'select2/selection/multiple',
'select2/selection/search',
'select2/dropdown',
'select2/dropdown/attachBody',
'select2/dropdown/closeOnSelect',
'select2/compat/containerCss',
'select2/utils'
], function (MultipleSelection, Search, Dropdown, AttachBody, CloseOnSelect, ContainerCss, Utils) {
var SelectionAdapter = Utils.Decorate(
MultipleSelection,
Search
);
var DropdownAdapter = Utils.Decorate(
Utils.Decorate(
Dropdown,
CloseOnSelect
),
AttachBody
);
$('.inline-search').select2({
dropdownAdapter: DropdownAdapter,
selectionAdapter: SelectionAdapter
});
$('.dropdown-search').select2({
selectionAdapter: MultipleSelection
});
$('.autocomplete').select2({
dropdownAdapter: DropdownAdapter,
selectionAdapter: Utils.Decorate(SelectionAdapter, ContainerCss),
containerCssClass: 'select2-autocomplete'
});
});
.select2-selection__choice__remove {
display: none !important;
}
.select2-container--focus .select2-autocomplete .select2-selection__choice {
display: none;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
<p>With an inline search box</p>
<select style="width: 200px" class="inline-search">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
<p>With the search box in the dropdown</p>
<select style="width: 200px" class="dropdown-search">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
<p>With the selection hidden when it is focused</p>
<select style="width: 200px" class="autocomplete">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>

jquery select-box - how can I have two inputs different widths

I'm using this jquery plugin to make my select dropdown boxes look nicer. http://code.google.com/p/select-box/
Here's a fiddle of it working:
http://jsfiddle.net/FQKax/1/
I want to have the two dropdowns to be different widths but I've tried wrapping them in divs, tried to hack the js to give them different ids, everything I can think of but no joy.
Also I'm ashamed to admit I can't seem to change the color of the text in the actual dropdown bit. I can change the backgound colour etc but buggered if I can change the color of the text... weird

There's an option that you can specify what to use as classname for the sbHolder object, but you don't want to change that since you would need to rewrite the CSS. It'd be nice if they let you set an additional class to apply, but they don't.
I would just put a wrapper around the select element and use CSS to override the default width http://jsfiddle.net/FQKax/8/
.wrapper-one .sbHolder{
width: 500px;
}
.wrapper-two .sbHolder {
width: 200px;
}
<div class="wrapper-one">
<select id="language">
<option value="javascript">Javascript</option>
<option value="objective-c">Objective C</option>
<option value="python">Python</option>
</select>
</div>
<br/><br/>
<div class="wrapper-two">
<select id="language2">
<option value="javascript">Javascript</option>
<option value="objective-c">Objective C</option>
<option value="python">Python</option>
</select>
</div>
This requires adding some markup, #cih's answer doesn't. It just requires using jQuery to mark each instance accordingly http://jsfiddle.net/FQKax/37/
$("#language").selectbox();
$("#language2").selectbox();
$(".sbHolder").each(function(index){
$(this).addClass('instance-' + index);
});
.instance-0.sbHolder{
width: 500px;
}
.instance-1.sbHolder {
width: 200px;
}

$(".sbHolder").first().addClass("first");
That will add a class you can target on you first checkbox, there better way to iterate through multiple selectors, check out this link..
Other than that Joe answers the rest of your question.

Try this
http://jsfiddle.net/FQKax/30/
<link href="http://select-box.googlecode.com/svn/tags/0.2/jquery.selectbox.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://select-box.googlecode.com/svn/tags/0.2/jquery.selectbox-0.2.min.js"></script>
<select id="language">
<option value="javascript">Javascript</option>
<option value="objective-c">Objective C</option>
<option value="python">Python</option>
</select>
<br/><br/>
<select id="language2">
<option value="javascript">Javascript</option>
<option value="objective-c">Objective C</option>
<option value="python">Python</option>
</select>
##### JQUERY #######
$(function () {
$("#language").selectbox();
$("#language2").selectbox();
$(".sbHolder").each(function(){
var $langDom = $(this);
if($langDom.prev().attr('id') == 'language'){
$langDom.addClass("language_1");
} else if($langDom.prev().attr('id') == 'language2') {
$langDom.addClass("language_2");
}
});
});
###### CSSS TO ADD #####
.language_1{
width: 1200px;
}
.language_2{
width: 200px;
}

For the text color, change .sbOptions a:link, .sbOptions a:visited {} and/or .sbOptions a:hover, .sbOptions a:focus, .sbOptions a.sbFocus {}.
For the widths, .sbOptions is your dropdown width, and .sbHolder {} is the width of the "currently selected" item.

We Keep Coding

JavaScript is the programming language of the Web.

change color when hovering over option - javascript

Related

Select is invisible because of linear-gradient in Chrome

How do i change the color of the buttons html/javascript [duplicate]

change the font size of the selected value after it is being select in select element of html

Select2 start with input field instead of dropdown

jquery select-box - how can I have two inputs different widths

Categories

Resources