Geek Answers Handbook

Plan HTML picks using UTF icons

Having this HTML

<select> <option>🏢Foo</option> </select> <select> <option>Foo</option> </select>

The secodn entry will be deleted. How to avoid this effect?

+8
html google-chrome symbols utf-8
source share
4 answers

The UTF character is above the text, so it moves the selection box.

I added some CSS to fix this - vertical-align: middle , to align the selection fields with each other; and line-height: 1.75em to make the symbol visible.

 select { vertical-align: middle; height: 1.75em; } 
 <select> <option>🏢Foo</option> </select> <select> <option>Foo</option> </select>
+3
source share

Try it.

 select { display: inline-block; vertical-align: middle; } 
 <select> <option>🏢Foo</option> </select> <select> <option>Foo</option> </select>
+3
source share

This will solve your problem with the location of the two select elements. The trick was to give them position:relative; and float:left; which you can confirm by removing height and margin-right and restarting:

 .lineEmUp { position:relative; float:left; height:28px; margin-right:5px; } 
 <select class="lineEmUp"> <option>🏢Foo</option> </select> <select class="lineEmUp"> <option>Foo</option> </select>
+1
source share

Try this one

 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <select> <option>🏢Foo</option> <option>☂Bar</option> </select> <select> <option>Foo</option> <option>Bar</option> </select> </body> </html>
0
source share

More articles:


All Articles