I have a default bootstrap user select box, where I apply a border-radius style:
<div class="container">
<select class="form-control" style="border-radius: 1rem;">
<option value="1">User 1</option>
<option value="2">User 2</option>
<option value="3">User 3</option>
<option value="4">User 4</option>
<option value="5">User 5</option>
</select>
</div>
So, I decided to update this select to use the jQuery lib select2 to get the searching feature, but I lost the border-radius formatting.
<div class="container">
<select class="form-control js-example-basic-single" style="border-radius: 1rem;">
<option value="1">User 1</option>
<option value="2">User 2</option>
<option value="3">User 3</option>
<option value="4">User 4</option>
<option value="5">User 5</option>
</select>
</div>
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
There is any way to apply border-radius when I use select2 in my select boxes?
Select2 append another element after the original select so if you want to style it, you can target it with .select2-container .select2-selection. For more specific, if you want to style only select2 of .js-example-basic-single, the selector will be .js-example-basic-single + .select2-container .select2-selection.
Working Fiddle
Related
The options in select tag is not displaying in materialize css.
<div class="row">
<div class="browser-default input-field col s12">
<select name="select_1" id="select_1">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
</div>
js:
$(document).ready(function(){
$('select').formSelect();
});
I have used $('select').material_select(); but still the options did not show.
Any reason for this? How can I show the options in the select?
I have missed the below part.
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
Actually I know the select box width is set by the longest option in the list, but I want to increase the length (width) of a select html element.
I also searched and I understand this code style="max-width:70%" may work but it doesn't work for me.
The code below is mine:
<select class="form-control"style="max-width:70%">
<option value="1">option 1 </option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
you should use width attribute instead of max-width.
correct your code to below sample:
<select class="form-control"style="width:150px">
<option value="1">option 1 </option>
<option value="2">option 2sdsdsdsd</option>
<option value="3">option 3</option>
</select>
You have to use css property min-width for increasing width of dropdown irrespective of the width of options.
html:
<select class="dropdown">
<option value="1">option 1 </option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
css:
.dropdown{
min-width: 200px;
}
This will help you.
<select class="form control"style="width:70%">
<option value="1">option 1 </option>
<option value="2">option 2sdsdsdsd</option>
<option value="3">option 3</option>
</select>
The problem is I can't change the height of the drop down box in html.for (select->option) I try to apply the style in CSS. It does not works
You can not control the style of option. (see here:https://css-tricks.com/dropdown-default-styling/)
however you can change the font-size and the option will grow
select option{
font-size: 20px;
}
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
It is not possible to change height of 'option'
Only you can change the background-color and color of the 'option' values
You can change the 'select' element height.
You just need to use the height CSS attribute for the select tag.
label select {
height: 100px;
}
<label>
<select>
<option selected>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</label>
<select style="min-height:40px;min-width:100px;">
<option value="">Select1</option>
<option value="">Select2</option>
<option value="">Select3</option>
</select>
You can style the select and option elements usign CSS like this:
select {
height: 200px;
color: red;
}
option {
color: green;
}
Notice that you have to remove the "." before select and option.
This will overwrite any select and option element.
EDIT:
You can also refer to a certain select element by giving to that element a class name, like this:
select.s1{
height: 100px;
}
select.s2{
height: 150px;
}
<select class="s1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select class="s2">
<option value="fiat">Fiat</option>
<option value="ferrari">Ferrari</option>
<option value="alfaromeo>Alfa Romeo</option>
<option value="lancia">Lancia</option>
</select>
How can I change the 2nd child of the option select with id "order" to green? The code I have below applies to all option select which is not preferable based on what I need. Is this doable?
<style>
select option:nth-of-type(2){
color: green;
}
</style>
<select id="order"/>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
<select id="type"/>
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>
You can either do this and assign your CSS classes manually
option.colored {
color: red;
}
<select>
<option>Option 1</option>
<option class="colored">Option 2</option>
<option>Option 3</option>
</select>
Or you can do this, have every :nth item colored in a specific list
.coloredOption option:nth-child(2n+2) {
color: red;
}
<select class="coloredOption">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
</select>
If you want to customize any types of check boxes(including select/options). We usually create divs that are look like we want and we tie this divs with our select/checkboxes with help of JavaScript
I am wanting to create a JavaScript drop down for my website and I want it to display divs underneath.
<select name="Portfolio">
<option id="1">Option 1</option>
<option id="2">Option 2</option>
<option id="3">Option 3</option>
<option id="4">Option 4</option>
</select>
<div id="1"><img src="URL" alt="Blah Blah Blah"/></div>
<div id="2"><img src="URL" alt="Blah Blah Blah"/></div>
What JavaScript code do i need for this to work? Any help will be greatly appreciated! I have looked at so many others but can't seem to get anything to work.
See jsfiddle link demo
<select name="Portfolio">
<option>None</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<div id="1" style="display:none;"><img src="img1" alt="Blah Blah Blah"/></div>
<div id="2" style="display:none;"><img src="img2" alt="Blah Blah Blah"/></div>
var old_id
$(function(){
$("select").change(function(){
$('div').css('display','none');
$('#'+$(this).val()).css('display','block');
});
});
<select name="Portfolio" id="portfolio">
<option>None</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option alue="4">Option 4</option>
</select>
<div id="1" style="display:none;"><img src="URL" alt="Blah Blah Blah"/></div>
<div id="2" style="display:none;"><img src="URL" alt="Blah Blah Blah"/></div>
$(document).ready(function() {
$("select").change(function() {
$('div').hide();
$('#'+$(this).val()).show();
});
});
run this in jsfiddle
Firstly, you're using id attributes in <option> i'd suggest using value instead; so your markup would be somewhat like this:
<select name="Portfolio">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
then, if you're not using jQuery a simple javascript approach to your problem would be like:
window.onload = function() {
document.getElementsByTagName('select')[0].onchange = function() {
document.getElementById(this.value).style.display = 'block';
}
}
In case you've have a problem with multiple images showing up on subsequent drop-down changes, hide all the divs every time the onchange() is triggered
see this working fiddle.