<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.
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
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>
I have a dropdownlist declared like this:
<select id="PageToCreate_AuthorID">
<option value="">Please select...</option>
<option value="1">Thierry</option>
<option value="2">Vanessa</option>
</select>
When the page is showed the fist time, here is what is displayed:
As you can see, we don't see all the text inside the control.
Then I click inside it and the dropdown is adjusted:
How can I do to have the dropdown showed correctly when the page is showed the first time?
Thanks.
Try to add some css for your select tag :
<select id="PageToCreate_AuthorID">
<option value="">Please select...</option>
<option value="1">Thierry</option>
<option value="2">Vanessa</option>
</select>
Css:
#PageToCreate_AuthorID {
min-width:200px; /* Change this value if you think you must do it */
}