I have sample code:
<select>
<option value="1">1<option>
<option value="2"> 2<option>
<option value="3"> 3<option>
<option value="4"> 4<option>
<option value="5"> 5<option>
</select>
And css:
select option:checked {
padding-left: 0;
text-align:left;
}
When I checked option (2 or 3 or 4 or 5), I can't remove whitespace, how to fix it ?
This is attachment:
Actually you're adding each <option> twice, You could either close <option> elements by </option> or remove the extra <option> element from the end.
Tag omission
An option element must have a start tag.
An option element’s end tag may be omitted if the option element is immediately followed by another option element.
Besides, leading or trailing white spaces in HTML are ignored by default:
EXAMPLE HERE
<select>
<option value="1">1</option>
<option value="2"> 2</option>
<option value="3"> 3</option>
<option value="4"> 4</option>
<option value="5"> 5</option>
</select>
Here's the code that removes leading & trailing white spaces in the text of all options.
$('select > option').each(function(){
var textValue = $.trim($(this).text());
$(this).text(textValue);
});
1 2 3 4 5
Close option tag correctly
Related
I have tried: active, focus, focus-within, target, hover, visited, focus-visible and none of them work. I want the select border to look the same. Currently it seems to get a larger border until something else is clicked.
Try
select[data-chosen]
select[data-chosen] {outline-offset:2px;outline:12px solid;}
select[data-chosen='opt1'] {outline:none;}
select[data-chosen='opt2'] {outline-color:green;}
select[data-chosen='opt3'] {outline-color:red;}
select[data-chosen='opt4'] {outline-color:steelblue;}
select[data-chosen='opt5'] {outline-color:orange;}
<select onchange=" this.dataset.chosen = this.value; ">
<option value="opt1"> I have no outline. </option>
<option value="opt2"> Make it green! </option>
<option value="opt3"> Why not red instead! </option>
<option value="opt4"> No, steelblue! It's so cool! </option>
<option value="opt5"> Okay, orange. It's final. </option>
</select>
I'm making an e-commerce and on my single product page (working with Woocommerce) i would like to add an icon to the select element at the right (dropdown icon). but i can't do a pseudo class before or after to the select element. So i need to wrap the select element to add it to the class of the div?
The code at the moment:
<select id="pa_farbe" class="" name="attribute_pa_farbe" data-attribute_name="attribute_pa_farbe" data-show_option_none="yes">
<option value="">Wählen Sie eine Option</option>
<option value="gruen" class="attached enabled">Grün</option>
<option value="kupfer" class="attached enabled">Kupfer</option>
<option value="lachs" class="attached enabled">Lachs</option>
<option value="tuerkisblau" class="attached enabled">Türkisblau</option>
<option value="violett" class="attached enabled">Violett</option>
</select>
I am using a multiselect box in JSP(Spring MVC).I have Three options in the multiselect. No CSS used for the size. but I am getting the multiselect size oversized. I just need the exact size with no extra spaces in it.
Please refer below for the code:
<select id="test" name="test" multiple="multiple">
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
</select>
The output contains some space under test3 which is not required. is there a way to eliminate that extra space?
NOTE: No CSS is used with the id.
Why not just set the height of the select via CSS?
select {
height: 45px;
}
<select id="test" name="test" multiple="multiple">
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
</select>
On a select dropdown, I need to make certain items 'strong/bold'.
How can I do this?
Example of what I ideally require:
<option value="#"><strong>Andorra</strong></option>
<option value="#">--Grandvalira</option>
<option value="#">--Vallnord</option>
<option value="#"><strong>Austria</strong></option>
<option value="#">--Amadé</option>
<option value="#">--Bad Kleinkirchheim</option>
<option value="#">--Mallnitz</option>
You actually can't.
The closest thing (you can't choose a bold item)
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
Which gives you this:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup
You can also build one of your own but it won't be input an input tag (you should use inputs of your own).
you could use :nth-child(N)
option:nth-child(1), option:nth-child(4) {
font-weight:bold;
}
Demo: http://jsfiddle.net/Sotiris/sqshN/
Find more info and browser support for this pseudo-class at http://reference.sitepoint.com/css/pseudoclass-nthchild
Using css in the works as a quicker, easier alternative
<option value="value" style="font-weight: bold;">SELECT ME</option>
You could do it with jQuery.
$('#Your select').append($("<option></option>").attr.css("font-weight" , "bold").html("Bold Text"));
You'd have to add some logic to determine which options to bold, obviously.
This also works (Firefox 50 and Chrome 55). Items 3 and 5 are shown in bold
<style>
.bld {font-weight:bold;}
</style>
<select>
<option value = "1">Kanakangi
<option value = "2">Ratnangi
<option class = "bld" value = "8">Hanumatthodi
<option value = "9">Dhenuka
<option class = "bld" value = "15">Mayamalavagowla
<option value = "16">Chakravaaham
</select>
For this portion of code
<label for="gender">I am:</label>
<select class="select" name="sex" id="sex">
<option value="0">Gender:</option>
<option value="1">Female</option>
<option value="2">Male</option>
</select>
W3C Validator giving this error reference to non-existent ID "gender"
How to solve this?
Edit
Getting here also
reference to non-existent ID "birthday"
<label for="birthday" class="birthday">Birthday:</label>
<div class="field_container">
<select name="birthday_month" id="birthday_month" class="">
<option value="-1">Month:</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
</select>
<select id="birthday_day" name="birthday_day">
<option value="-1">Day:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="birthday_year" name="birthday_year">
<option value="-1">Year:</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
</select>
</div>
Change the value of the for attribute in the label element:
<label for="sex">I am:</label>
Edit to add:
Your second example is more complicated, because you're using one label for three input fields.
I'd recommend something like the following:
Add the following CSS rule to your site:
.hidden_label {
font-size:1px;
height:0;
line-height:0;
margin:0 0 0 -1000px;
text-indent:-9999px;
}
Then update your form:
<div class="birthday">Birthday:</div>
<div class="field_container">
<label for="birthday_month" class="hidden_label">Birthday Month</label>
<select name="birthday_month" id="birthday_month" class="">
<option value="-1">Month:</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
</select>
<label for="birthday_day" class="hidden_label">Birthday Day</label>
<select id="birthday_day" name="birthday_day">
[...]
</select>
<label for="birthday_year" class="hidden_label">Birthday Year</label>
<select id="birthday_year" name="birthday_year">
[...]
</select>
You want to do two things:
Have a visually appealing form for your users, and then for those users that are using assistive technology, provide some additional helpers along the way. Using the CSS class I defined above, you are ensuring that screen readers will still see the elements and read their contents when the user moves into the form elements, while hiding all the additional labels from the visual site.
There is no id="gender" or name="gender". You are using sex. Either use sex or use gender. Keep it consistent.