I have a select with some options displaying text:
<select *ngIf="cars" class="form-control">
<option *ngFor="let car of cars" value="true">{{car.ID}}</option>
</select>
Is it possible to add an Icon at the beginning of the option? Like [icon]3
UPDATE
I have added the library font-icons to my .angular-cli.son:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome-4.7.0/css/font-awesome.min.css"
and update the code of my select to:
<select *ngIf="cars" class="form-control glyphicon">
<option *ngFor="let car of cars" value="true"> {{car.ID}}</option>
</select>
I use bootstrap 3
It tries to print an icon, but I get an empty square. Any idea?
It seems to me that you are using Bootstrap. So, it is possible to put icon inside option, like this.
<select class="form-control glyphicon">
<option value=""> Icon 1</option>
<option value=""> Icon 2</option>
<option value=""> Icon 3</option>
</select>
Sadly it is not possible using plain HTML <select>. It is possible with wrapper for select. Your own piece of code, that is displayed instead of browser's default select. I recommend you to find some library with ready-to-use wrapper. For example there is select wrapper inside Angular Material (https://material.angular.io/components/select), but you can find standalone wrappers.
Related
Hello this is my first post
I am new to web development and having a wired issue .
when i add select options it gets a dublicate text just below it which is labelled as no 2 and i dont want it .
enter image description here
my html code
<select>
<option value="Hafizabad">Pakistan</option>
<option value="Hafizabad">USA</option>
<option value="Hafizabad">Russia</option>
</select>
Please check that options are given inside the select element like below
<select>
<option value="one">One</option>
</select>
I want to show flaticons in options but html output doesn't display them.
How to display Icon in select options tag
Above question is solved by using  instead of icon class like that:
<option value="fa fa-address-card"> line chart</option>
If it is possible, how can I solve this problem with the same solution method for flaticons?
flaticon.css contains below style:
.flaticon-tool:before {
content: "\f177";
my html output:
<select class="form-control" name="hekim-extension_ozellikler_icon-select" id="hekim-extension_ozellikler_icon-select">
<option>flaticon-throat</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
If it is possible and easy, also I can use a solution for boootstrap 3.
There is no valid solution to put icons into a select option. My solution is using a jQuery icon picker.
I add my own HTML element 'select' in Wordpress by Elementor and inside select some function from 'SELECT2' set automatically class 'select2-hidden-accessible'. In result my select doesn't open on mobile devices. And I don't know how I can remove this class - when I remove in console my select works. Or maybe can I set function to open my select. I tried remove it in JS but it doesn't work. I tried remove it in function select2 but it not works too. Please help me.
my code:
<select id="cat__mobile">
<option value=""></option>
<option value="opt1">opt1</option>
<option value="opt2">opt2</option>
</select>
code in console:
<select id="cat__mobile" data-select2-id="cat__mobile" tabindex="-1" style="" class="select2-hidden-accessible" aria-hidden="true">
<option value="" data-select2-id="5"></option>
<option value="opt1">opt1</option>
<option value="opt2">opt2</option>
</select>
Plugin id same now change the id on your side
Suppose I have this dropdown list:
<select>
<option value="1">Audi</option>
<option value="2">BMW</option>
</select>
and some text like this:
<h2>xxx</h2>
I want to replace "xxx" with the value of the selected option from the dropdown. I know how to do this in javascript, query...
My question is more if there is some hack to make this work in html/css only.
You can detect if option is check with CSS property :checked (do that : option:checked), but you can't change text with only HTML or CSS.
I try to display h2 element with :checked and brother property like that :
<select>
<option value="1">
<p>Audi</p>
<h2>Audi</h2>
</option>
<option value="2">
<p>BMW</p>
<h2>BMW</h2>
</option>
</select>
But it's impossible to put something other than text
Does native HTML have a listbox element? You know how it has a drop box element (called select), does it also have a listbox?
If not, do you know how I could place a list box in my Website.
One method, is to create a table & have each element detect the onclick event. But I dont want to make my own just yet. Are javascript widgets easy to use?
Use a select list:
<select multiple="multiple" size="2">
<option value="Whatever">One</option>
<option value="Other">Two</option>
</select>
#Myles has the select box which is correct, you can also allow multiple select options.
<select multiple="multiple">
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
<option value="opt3">Option 3</option>
</select>
Add the multiple attribute to a normal <select> and use the size attribute to determine how many rows you want shown. (If you don't set the size attribute, then all options will be visible.):
<select multiple="multiple" size="5">
See example.
I think what you need is the select tag, but set the selects attributes of multiple and size. Here is a reference http://www.w3schools.com/tags/tag_select.asp.
<select multiple='multiple' size='3'>
<option value='o1'>Red</option>
<option value='o2'>Green</option>
<option value='o3'>Blue</option>
</select>
At this moment the standards do not have a listbox element.
There's a web spec in progress about the <selectmenu> element which does have a listbox slot (not element). Possibly this could end up being back in the <select> element
If you want to read more about it:
https://open-ui.org/prototypes/selectmenu
https://css-tricks.com/the-selectmenu-element/