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>
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 have a page with a Select Option
but in my AMP Page i cant see this element,
What i need to add to this work?
For navigate the page use AMP.navigateTo
<select on="change:AMP.navigateTo(url=event.value)">
<option selected>-Select a Page-</option>
<option value="YOUR-PAGE-URL">Home Page</option>
<option value="YOUR-PAGE-URL">About Us</option>
<option value="YOUR-PAGE-URL">Camping Tips</option>
</select>
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
<select>
<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>
</select>
This returns:
Swedish Cars
Volvo
Saab
German Cars
Mercedes
Audi
This is ok, but I would like to add before Volvo, Saab, Mercedes and Audi own prefix, for example ">" and remove empty space like this:
Swedish Cars
>Volvo
>Saab
German Cars
>Mercedes
>Audi
Is this possible? If yes, how?
Sure it is possible in javascript.
Do this:
var myArr = document.querySelectorAll('optgroup > option');
for(var i=0;i<myArr.length;i++){
myArr[i].textContent = ">"+ myArr[i].textContent;
}
As far as I know this is not possible. Css styling does not work on them and there is not option that does this.
What you can do is:
use just the option tag and add the > manually or with javascript.
make a custom drop-down menu like here.
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.