Related
I have a select list of genders.
Code:
<select>
<option>male</option>
<option>female</option>
<option>others</option>
</select>
I want to use an image in drop down list as drop-down-icon.jpeg.
I want to add a button in place of drop down icon.
How to do that?
In Firefox you can just add background image to option:
<select>
<option style="background-image:url(male.png);">male</option>
<option style="background-image:url(female.png);">female</option>
<option style="background-image:url(others.png);">others</option>
</select>
Better yet, you can separate HTML and CSS like that
HTML
<select id="gender">
<option>male</option>
<option>female</option>
<option>others</option>
</select>
CSS
select#gender option[value="male"] { background-image:url(male.png); }
select#gender option[value="female"] { background-image:url(female.png); }
select#gender option[value="others"] { background-image:url(others.png); }
In other browsers the only way of doing that would be using some JS widget library, like for example jQuery UI, e.g. using Selectable.
From jQuery UI 1.11, Selectmenu widget is available, which is very close to what you want.
With countries, languages or currency you may use emojis.
Works with pretty much every browser/OS that supports the use of emojis.
select {
height: 50px;
line-height: 50px;
font-size: 12pt;
}
<select name="countries">
<option value="NL">🇳🇱 Netherlands</option>
<option value="DE">🇩🇪 Germany</option>
<option value="FR">🇫🇷 France</option>
<option value="ES">🇪🇸 Spain</option>
</select>
<br /><br />
<select name="currency">
<option value="EUR">🇪🇺 € EUR 💶</option>
<option value="GBP">🇬🇧 £ GBP 💷</option>
<option value="USD">🇺🇸 $ USD 💵</option>
<option value="YEN">🇯🇵 ¥ YEN 💴</option>
</select>
You can use iconselect.js; Icon/image select (combobox, dropdown)
Demo and download; http://bug7a.github.io/iconselect.js/
HTML usage;
<div id="my-icon-select"></div>
Javascript usage;
var iconSelect;
window.onload = function(){
iconSelect = new IconSelect("my-icon-select");
var icons = [];
icons.push({'iconFilePath':'images/icons/1.png', 'iconValue':'1'});
icons.push({'iconFilePath':'images/icons/2.png', 'iconValue':'2'});
icons.push({'iconFilePath':'images/icons/3.png', 'iconValue':'3'});
iconSelect.refresh(icons);
};
My solution is to use Font Awesome and then add library icons as text, using the unicode in HTML directly.
You just need the Unicode value for whatever icon you want, and they are all found here: Font Awesome full list of icons, including unicode
Here is an example state filter:
<select name='state' style='height: 45px; font-family:Arial, Font Awesome;'>
<option value=''> All States</option>
<option value='enabled' style='color:green;'> Enabled</option>
<option value='paused' style='color:orange;'> Paused</option>
<option value='archived' style='color:red;'> Archived</option>
</select>
Note the font-family:Arial, FontAwesome; is required to be assigned in style for select like given in the example.
You already have several answers that suggest using JavaScript/jQuery. I am going to add an alternative that only uses HTML and CSS without any JS.
The basic idea is to use a set of radio buttons and labels (that will activate/deactivate the radio buttons), and with CSS control that only the label associated to the selected radio button will be displayed. If you want to allow selecting multiple values, you could achieve it by using checkboxes instead of radio buttons.
Here is an example. The code may be a bit messier (specially compared to the other solutions):
.select-sim {
width:200px;
height:22px;
line-height:22px;
vertical-align:middle;
position:relative;
background:white;
border:1px solid #ccc;
overflow:hidden;
}
.select-sim::after {
content:"▼";
font-size:0.5em;
font-family:arial;
position:absolute;
top:50%;
right:5px;
transform:translate(0, -50%);
}
.select-sim:hover::after {
content:"";
}
.select-sim:hover {
overflow:visible;
}
.select-sim:hover .options .option label {
display:inline-block;
}
.select-sim:hover .options {
background:white;
border:1px solid #ccc;
position:absolute;
top:-1px;
left:-1px;
width:100%;
height:88px;
overflow-y:scroll;
}
.select-sim .options .option {
overflow:hidden;
}
.select-sim:hover .options .option {
height:22px;
overflow:hidden;
}
.select-sim .options .option img {
vertical-align:middle;
}
.select-sim .options .option label {
display:none;
}
.select-sim .options .option input {
width:0;
height:0;
overflow:hidden;
margin:0;
padding:0;
float:left;
display:inline-block;
/* fix specific for Firefox */
position: absolute;
left: -10000px;
}
.select-sim .options .option input:checked + label {
display:block;
width:100%;
}
.select-sim:hover .options .option input + label {
display:block;
}
.select-sim:hover .options .option input:checked + label {
background:#fffff0;
}
<div class="select-sim" id="select-color">
<div class="options">
<div class="option">
<input type="radio" name="color" value="" id="color-" checked />
<label for="color-">
<img src="http://placehold.it/22/ffffff/ffffff" alt="" /> Select an option
</label>
</div>
<div class="option">
<input type="radio" name="color" value="red" id="color-red" />
<label for="color-red">
<img src="http://placehold.it/22/ff0000/ffffff" alt="" /> Red
</label>
</div>
<div class="option">
<input type="radio" name="color" value="green" id="color-green" />
<label for="color-green">
<img src="http://placehold.it/22/00ff00/ffffff" alt="" /> Green
</label>
</div>
<div class="option">
<input type="radio" name="color" value="blue" id="color-blue" />
<label for="color-blue">
<img src="http://placehold.it/22/0000ff/ffffff" alt="" /> Blue
</label>
</div>
<div class="option">
<input type="radio" name="color" value="yellow" id="color-yellow" />
<label for="color-yellow">
<img src="http://placehold.it/22/ffff00/ffffff" alt="" /> Yellow
</label>
</div>
<div class="option">
<input type="radio" name="color" value="pink" id="color-pink" />
<label for="color-pink">
<img src="http://placehold.it/22/ff00ff/ffffff" alt="" /> Pink
</label>
</div>
<div class="option">
<input type="radio" name="color" value="turquoise" id="color-turquoise" />
<label for="color-turquoise">
<img src="http://placehold.it/22/00ffff/ffffff" alt="" /> Turquoise
</label>
</div>
</div>
</div>
Another jQuery cross-browser solution for this problem is http://designwithpc.com/Plugins/ddSlick which is made for exactly this use.
This is using ms-Dropdown : https://github.com/marghoobsuleman/ms-Dropdown
Data resource is json. But you dont need to use json. If you want you can use with css.
Css example : https://github.com/marghoobsuleman/ms-Dropdown/tree/master/examples
Json Example : http://jsfiddle.net/tcibikci/w3rdhj4s/6
HTML
<div id="byjson"></div>
Script
<script>
var jsonData = [
{description:'Choos your payment gateway', value:'', text:'Payment Gateway'},
{image:'https://via.placeholder.com/50', description:'My life. My card...', value:'amex', text:'Amex'},
{image:'https://via.placeholder.com/50', description:'It pays to Discover...', value:'Discover', text:'Discover'},
{image:'https://via.placeholder.com/50', title:'For everything else...', description:'For everything else...', value:'Mastercard', text:'Mastercard'},
{image:'https://via.placeholder.com/50', description:'Sorry not available...', value:'cash', text:'Cash on devlivery', disabled:true},
{image:'https://via.placeholder.com/50', description:'All you need...', value:'Visa', text:'Visa'},
{image:'https://via.placeholder.com/50', description:'Pay and get paid...', value:'Paypal', text:'Paypal'}
];
$("#byjson").msDropDown({byJson:{data:jsonData, name:'payments2'}}).data("dd");
}
</script>
For those wanting to display an icon, and accepting a "black and white" solution, one possibility is using character entities:
<select>
<option>100 €</option>
<option>89 £</option>
</select>
By extension, your icons can be stored in a custom font.
Here's an example using the font FontAwesome: https://jsfiddle.net/14606fv9/2/
https://jsfiddle.net/14606fv9/2/
One benefit is that it doesn't require any Javascript.
However, pay attention that loading the full font doesn't slow down the loading of your page.
Nota bene:
The solution of using a background image doesn't seem working anymore in Firefox (at least in version 57 "Quantum"):
<select>
<option style="background-image:url(euro.png);">100</option>
<option style="background-image:url(pound.png);">89</option>
</select>
For a two color image, you can use Fontello, and import any custom glyph you want to use. Just make your image in Illustrator, save to SVG, and drop it onto the Fontello site, then download your custom font ready to import. No JavaScript!
Alvaros JS free answer was a great start for me, and I really tried to get a truly JS-free answer that still delivered all the functionality expected of a Select with images, but sadly nesting forms was the down-fall. I'm posting two solutions here; my main solution that uses 1 line of JavaScript, and a totally JavaScript-free solution that won't work inside another form, but might be useful for nav menus.
Unfortunately there is a bit of repetition in the code, but when you think about what a Select does it makes sense. When you click on an option it copies that text to the selected area, i.e., clicking 1 of 4 options will not change the 4 options, but the top will now repeat the one you clicked. To do this with images would require JavaScript, orrrr... you duplicate the entries.
In my example we have a list of games (Products), which have versions. Each product may also have Expansions, which can also have versions. For each Product we give the user a list of each version if there's more than one, along with an image and version specific text.
<h4>#Model.Name</h4>
#if (Model.Versions.Count == 1)
{
<div class="rich-select-option-body pl-2">
<img src="#Model.Versions[0].ImageUrl" alt="">#Model.Versions[0].VersionName (#Model.Versions[0].Year)
</div>
}
else
{
<h5>Select the version</h5>
<div class="rich-select custom-select">
<div class="rich-select-dropdown">
#foreach (var version in Model.Versions)
{
<div class="rich-select-option">
<input type="radio" name="game" id="game-#version.ProductId-#version.VersionId" #if (version == Model.Versions.First()) { #Html.Raw(" checked") ; } />
<div class="rich-select-option-body">
<label tabindex="-1">
<img src="#version.ImageUrl" alt="">#version.VersionName (#version.Year)
</label>
</div>
</div>
}
</div>
<input type="checkbox" id="rich-select-dropdown-button" class="rich-select-dropdown-button" />
<label for="rich-select-dropdown-button"></label>
<div class="rich-select-options">
#foreach (var version in Model.Versions)
{
<div class="rich-select-option">
<div class="rich-select-option-body">
<label for="game-#version.ProductId-#version.VersionId" tabindex="-1" onclick="document.getElementById('rich-select-dropdown-button').click();">
<img src="#version.ImageUrl" alt=""> #version.VersionName (#version.Year)
</label>
</div>
</div>
}
</div>
</div>
}
Using JS for the checkbox deselection we can have multiple instances on a form. Here I've extended to show a list of Expansions, which also have the same logic around versions.
<h5 class="mt-3">Include Expansions?</h5>
#foreach (var expansion in Model.Expansions)
{
<div class="form-row">
<div class="custom-control custom-checkbox w-100">
<input type="checkbox" class="expansion-checkbox custom-control-input" id="exp-#expansion.ProductId">
<label class="custom-control-label w-100" for="exp-#expansion.ProductId">
#if (expansion.Versions.Count == 1)
{
<div class="rich-select-option-body pl-2">
<img src="#expansion.ImageUrl" />#expansion.Name: #expansion.Versions[0].VersionName (#expansion.Versions[0].Year)
</div>
}
else
{
<div class="rich-select custom-select">
<div class="rich-select-dropdown">
#foreach (var version in expansion.Versions)
{
<div class="rich-select-option">
<input type="radio" name="exp-#version.ProductId" id="exp-#version.ProductId-#version.VersionId" #if (version == expansion.Versions.First()) { #Html.Raw(" checked") ; } />
<div class="rich-select-option-body">
<label tabindex="-1">
<img src="#version.ImageUrl" alt="">#expansion.Name: #version.VersionName (#version.Year)
</label>
</div>
</div>
}
</div>
<input type="checkbox" id="rich-select-dropdown-button-#expansion.ProductId" class="rich-select-dropdown-button" />
<label for="rich-select-dropdown-button-#expansion.ProductId"></label>
<div class="rich-select-options">
#foreach (var version in expansion.Versions)
{
<div class="rich-select-option">
<div class="rich-select-option-body">
<label for="exp-#version.ProductId-#version.VersionId" tabindex="-1" onclick="document.getElementById('rich-select-dropdown-button-#expansion.ProductId').click();">
<img src="#version.ImageUrl" alt="">#expansion.Name: #version.VersionName (#version.Year)
</label>
</div>
</div>
}
</div>
</div>
}
</label>
</div>
</div>
Of course this requires a fair bit of CSS, which I've only included in this JSFiddle to reduce the size of this already massive answer. I've used Bootstrap 4 to reduce the amount needed, and also to allow it to fit in with other Bootstrap controls and any site customisations that have been made.
The images are set to 75px, but this can easily be changed in 5 lines in .rich-select and .rich-select-option-body img
I propose an alternative
when I'm in a difficult situation like this using dxlookup from devexpress
Examples:https://js.devexpress.com/Demos/WidgetsGallery/Demo/Lookup/Templates/jQuery/Light/
I tried several jquery based custom select with images, but none worked in responsive layouts. Finally i came accross Bootstrap-Select. After some modifications i was able to produce this code.
Code and github repo here
I got the same issue. My solution was a foreach of radio buttons, with the image at the right of it. Since you can only choose a single option at radio, it works (like) a select.
Worked well for me.
I was struggling with the same problem: how to create a language selector with flags. I came up with a :ḧover solution without javascript. It does involve some server-side processing to set a class in the HTML.
The code can be easily generated from PHP or nodejs or Angular/Typescript. In this example there are 3 images contained in an A-element (< a href='./?lang=..."> ).
The trick is that you should fetch the URL GET parameter lang and set the class selected so it will be the only one visible.
The CSS hinges on the fact that there is only one flag visible based on the class selected being present. When the mouse hovers over the container (<div class="languageselect">.....</div>) the CSS will show all flags by overriding the classes div.flag:not(.selected) and div.flag.selected and setting display:block . Then the <a href="..."> will be available to the users.
Of course there is lots of other styling possible to increase useability. This is just a starting point.
Please note the first part of the CSS-line will put the language selector on top on a fixed position. This also helps prevent the flag-container to span a whole line, messing up the :hover detection.
Happy coding!
WOrking example here: codepen
HTML:
<div class="languageselect">
<div class="select">
<div class="flag ">
<a href="./?lang=en">
<img src="https://www.sciencekids.co.nz/images/pictures/flags120/United_Kingdom.jpg">
</a>
</div>
<div class="flag selected">
<a href="./?lang=en_us">
<img src="https://www.sciencekids.co.nz/images/pictures/flags120/United_States.jpg">
</a>
</div>
<div class="flag ">
<a href="./?lang=nl">
<img src="https://www.sciencekids.co.nz/images/pictures/flags96/Netherlands.jpg">
</a>
</div>
</div>
</div>
CSS:
.languageselect {
position: absolute;
top: 0;
left:0;
z-index: 1000;
}
.languageselect img {
max-height: 20px;
}
.languageselect div.flag:not(.selected) {
display: none;
}
.languageselect div.flag.selected {
display: block;
}
.languageselect:hover div.flag {
display:block;
}
UPDATE: As of 2018, this seems to work now. Tested in Chrome, Firefox, IE and Edge
UPDATE: Yes I changed the background-color, not the image, stop voting me down, showing that you can change style here is still a useful contribution.
<!DOCTYPE html>
<html>
<body>
<style>
select#newlocale option[value="volvo"] { background-color: powderblue; }
select#newlocale option[value="opel"] { background-color: red; }
select#newlocale option[value="audi"] { background-color: green; }
</style>
<select id="newlocale">
<option value="volvo"><div >Volvo</div></option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
I am building a project with laravel. The layout is pretty similar to the Pinterest layout (also known as masonry) and it shows different types of rooms:
The layout was implemented in such a way that the images are placed in horizontal order. To do that I followed this tutorial.
This is the code for the layout:
HTML:
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
<div class="grid products-by-room" data-masonry='{ "itemSelector": ".grid-item"}' style="margin-top: 8rem">
#foreach ($rooms as $room)
<div class="grid-item" data-category="{{ $room->data_category}}" style="border: 7px solid #fff">
<a href="#zoomImg{{ $room->id }}" data-bs-toggle="modal" data-bs-target="#zoomImg{{ $room->id }}">
<div class="img-wrapper">
<img src="{{ $room->img }}" alt="" class="img-fluid shade">
<div class="overlay">
<i class="fa fa-search-plus icon"></i>
</div>
</div>
</a>
<div class="text-left mt-3 mb-5">
<p class="product-subtitle">{{ $room->name }}</p>
<h4 class="product-title">Shop the Look</h4>
<a class="product-price-link" href="#getPriceByRoom{{ $room->id }}" data-bs-toggle="modal" data-bs-target="#getPriceByRoom{{ $room->id }}">get price</a>
</div>
</div>
#endforeach
</div>
CSS:
.grid-item img {
width: 100%;
font-size: 0;
}
.grid-item {
width: 100%;
}
#media (min-width: 768px) {
.grid-item {
width: 33.333%;
}
}
I created a filter that displays only the rooms that are checked, but it is not working as I intended. It does filter the rooms correctly, but it leaves a lot of empty spaces around them.
This is the filter:
HTML:
<div class="modal-backdrop-filters"></div>
<div id="mySidenav" class="sidenav">
<div class="top-header-filters">
<h3 class="title-filters">FILTERS</h3>
<a id="closebtn" class="closebtn filter-close-btn">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"
style="border: none; background-color: #fff;">
<span aria-hidden="true">×</span>
</button>
</a>
</div>
<div class="header-filters">
<h4 class="title-filters">Categories</h4>
</div>
<div class="round" id="r-group">
<form>
<label class="label-filter" style="margin-top: 3rem;"><input type="checkbox" name="room" value="office"><span class="label-text"> Office</span></label><br>
<label class="label-filter"><input type="checkbox" name="room" value="bedroom"/><span class="label-text">Bedroom</span></label><br>
<label class="label-filter"><input type="checkbox" name="room" value="living-room"/><span class="label-text">Living Room</span></label><br>
<label class="label-filter"><input type="checkbox" name="room" value="dining-room"/><span class="label-text">Dining Room</span></label><br>
<label class="label-filter"><input type="checkbox" name="room" value="library"/><span class="label-text">Library</span></label><br>
<label class="label-filter"><input type="checkbox" name="room" value="hallway"/><span class="label-text">Hallway</span></label><br>
<label class="label-filter"><input type="checkbox" name="room" value="kitchen"/><span class="label-text">Kitchen</span></label><br>
<label class="label-filter"><input type="checkbox" name="room" value="bar"/><span class="label-text">Bar</span></label><br>
<label class="label-filter"><input type="checkbox" name="room" value="entryway"/><span class="label-text">Entryway</span></label><br>
</form>
</div>
<button id="applyBtn" class="apply-filters-btn">APPLY</button>
</div>
</div>
SCRIPT:
$(function(){
$('form').find("input").on('change',function(){
let selected = [];
$('form').find("input").each(function(){
if(jQuery(this).is(":checked")){
selected.push(jQuery(this).val());
}
})
if(!selected.length){
$(".products-by-room > div").show();
return;
}
$(".products-by-room > div").hide();
$(".products-by-room > div").each(function(){
const category = jQuery(this).attr('data-category');
const categorySplitted = category.split(' ');
categorySplitted.forEach((cat)=>{
if(selected.indexOf(cat) !== -1){
jQuery(this).show();
}
});
});
});
});
The problem is, when I select a room such as "dining room" this is the result I get, the images are shown in their original spot and lots of white spaces aroun them:
This is the result I intended, all dining rooms in the same row, with no spaces around:
Is there a way I can achieve this? Thanks in advance!
I have a survey that requires the takers to complete all the fields but somehow I have blank entries in the output file for the columns "title2" and "dept2". I believe when they provide no answer in the blank spaces, it is shown as "{}". But these entries are completely blank which I cannot understand how. I was wondering if there is any general mistake that could give rise to this issue. The whole code is provided below. Thank you.
<p> </p>
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" integrity="sha384- IS73LIqjtYesmURkDE9MXKbXqYA8rvKEp/ghicjem7Vc3mGRdQRptJSz60tvrB6+" rel="stylesheet" />
<meta content="width=device-width,initial-scale=1" name="viewport" />
<p> </p>
<section class="container" id="TranscriptionFromAnImage"><!-- Instructions -- >
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="panel panel-primary"><a class="panel-heading"><strong>Table transcription instructions</strong> </a>
<p> </p>
<p><span style="font-family:arial,helvetica,sans-serif;">F</span><span style="font-family: arial, helvetica, sans-serif;">or each job (up to two) that this person has had since he/she received his/her </span><span style="font- family: arial, helvetica, sans-serif;">Ph.D.</span><span style="font-family: arial, helvetica, sans-serif;">, please copy and paste the related sections from this CV whenever possible:</span></p>
<ol style="font-size: 14px;">
<li>
<p><span style="font-family:arial,helvetica,sans-serif;">The institution for which he/she has worked</span></p>
</li>
<li>
<p><span style="font-family:arial,helvetica,sans-serif;">His/her department in the institution</span></p>
</li>
<li>
<p><span style="font-family:arial,helvetica,sans-serif;">The title of his/her job</span></p>
</li>
<li>
<p><span style="font-family:arial,helvetica,sans-serif;">Start year</span> </p>
</li>
<li>
<p><span style="font-family:arial,helvetica,sans-serif;">The year in which he/she left the job </span></p>
</li>
</ol>
<p>When some of this information is not present in the C.V. leave the related sections blank..</p>
<p>// AND if "Other" is an option, select "Other" and type "NA" in the blank space provided. If "Other" is not an option, only type "NA" in the blank space provided. <span style="font-family: arial, helvetica, sans-serif;">If the person has had only one job since getting his/her Ph.D., follow this procedure for the questions related to the second job. //</span></p>
<p>As a rule of thumb, if the start year of a job is specified but the end year is not, select "Ongoing" for the end year.</p>
<p>Please check the two links below as a reference.</p>
<div align="left"><font color="red">Link to the first example:link</font></div>
<div align="left"><font color="red">Link to the second example: link</font></div>
<div align="left"> </div>
</div>
</div>
</div>
<iframe height="1000" src="${pdf_url}" width="700"></iframe>
<div class="col-xs-12 col-sm-4 fields">
<div class="form-group"> </div>
<div class="form-group"><strong><font color="red">Questions related to the FIRST job after receiving Ph.D.</font></strong></div>
<div class="form-group"><label for="TranscriptionTexts">1. Copy and paste the name of the institution for which this person worked for</label><textarea class="form-control" cols="250" id="1st_inst" name="1st_inst" required="" rows="1"></textarea></div>
<p> </p>
<div class="form-group"><label for="TranscriptionTexts">2. Select the option "Economics department" if his/her job is at an economics department. Otherwise, select "Other" and copy and paste his department or division in the institution</label></div>
<div class="radio-inline"><label><input autocomplete="off" id="option1" name="dept1" required="" type="radio" value="econdept" /> Economics department</label></div>
<div class="radio"><label><input autocomplete="off" id="option2" name="dept1" required="" type="radio" value="other" />Other</label><textarea class="form-control" cols="250" id="1st_dept_other" name="1st_dept_other" rows="1"> </textarea></div>
<div class="form-group"> </div>
<div class="form-group"><label for="TranscriptionTexts">3. Select the title of this person's first job. If the title is neither "Assistant Professor" nor "Post-doc", select "Other" and copy and paste the title from the CV</label></div>
<div class="radio-inline"><label><input autocomplete="off" id="option1" name="title1" required="" type="radio" value="ap" /> Assistant professor </label> </div>
<div class="radio-inline"><label><input autocomplete="off" id="option2" name="title1" required="" type="radio" value="postdoc" />Post-doc</label></div>
<div class="radio"><label><input autocomplete="off" id="option3" name="title1" required="" type="radio" value="other" />Other</label><textarea class="form-control" cols="250" id="1st_title_other" name="1st_title_other" rows="1"></textarea></div>
<div class="form-group">
<p> </p>
<p><label class="group-label">4. Select the start year of this job from the drop-down menu below</label></p>
<input list="startyr1" name="startyr1" placeholder="Choose start year" /> <datalist id="startyr1"><option value="2017"></option><option value="2018"> </option><option value="NA"></option></datalist></div>
<div class="form-group">
<p> </p>
<p><label class="group-label">5. Select the end year of this job from the drop-down menu below. If still holding the position, select "Ongoing" from the menu.</label></p>
<input list="endyr1" name="endyr1" placeholder="Choose end year" /> <datalist id="endyr1"><option value="2017"></option><option value="2018"></option><option value="Ongoing"></option><option value="NA"></option></datalist></div>
<div class="form-group"> </div>
<div class="form-group"><strong><font color="red">Questions related to the SECOND job after receiving Ph.D.</font></strong></div>
<div class="form-group"><label for="TranscriptionTexts">6. </label><span style="font-weight: 700;">Copy and paste the name of the institution for which this person worked for</span><textarea class="form-control" cols="250" id="2nd_inst" name="2nd_inst" required="" rows="1"></textarea></div>
<div class="form-group"><label for="TranscriptionTexts">7. </label><span style="font-weight: 700;">Select the option "Economics department" if his/her job is at an economics department. Otherwise, select "Other" and copy and paste his department or division in the institution</span> </div>
**<div class="radio-inline"><label><input autocomplete="off" id="option1" name="dept2" required="" type="radio" value="econdept" /> Economics department </label></div>
<div class="radio"><label><input autocomplete="off" id="option2" name="dept2" required="" type="radio" value="other" />Other</label><textarea class="form- control" cols="250" id="2nd_dept_other" name="2nd_dept_other" rows="1"> </textarea></div>
<div class="form-group"> </div>
<div class="form-group"><label for="TranscriptionTexts">8. </label><span style="font-weight: 700;">Select the title of this person's first job. If the title is neither "Assistant Professor" nor "Post-doc", select "Other" and copy and paste the title from the CV</span></div>
<div class="radio-inline"><label><input autocomplete="off" id="option1" name="title2" required="" type="radio" value="ap" /> Assistant professor </label></div>
<div class="radio-inline"><label><input autocomplete="off" id="option2" name="title2" required="" type="radio" value="postdoc" />Post-doc</label></div>
<div class="radio"><label><input autocomplete="off" id="option3" name="title2" required="" type="radio" value="other" />Other</label><textarea class="form-control" cols="250" id="2nd_title_other" name="2nd_title_other" rows="1"></textarea></div>**
<div class="form-group">
<p> </p>
<p><label class="group-label">9. Choose the start year from the drop-down menu below</label></p>
<input list="startyr2" name="startyr2" placeholder="Choose start year" /> <datalist id="startyr2"><option value="2017"></option><option value="2018"></option><option value="NA"></option></datalist></div>
<div class="form-group">
<p><label class="group-label">10. Select the end year of this job from the drop-down menu below. If still holding the position, select "Ongoing" from the drop-down menu.</label></p>
<input list="endyr2" name="endyr2" placeholder="Choose end year" /> <datalist id="endyr2"><option value="2017"></option><option value="2018"></option><option value="NA"></option><option value="Ongoing"></option></datalist></div>
<!-- End Image Transcription Layout --><!-- Open internal style sheet -->
<style type="text/css">#collapseTrigger{ color:#fff; display: block; text-decoration: none; } #submitButton{ white-space: normal; } .image{ margin-bottom: 15px; } .group-label{ display: block; } .radio-inline>label{ font-weight: normal; }
</style>
<!-- Close internal style sheet --><!-- Please note that Bootstrap CSS/JS and JQuery are 3rd party libraries that may update their url/code at any time. Amazon Mechanical Turk (MTurk) is including these libraries as a default option for you, but is not responsible for any changes to the external libraries --><script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js" integrity="sha384-s1ITto93iSMDxlp/79qhWHi+LsIi9Gx6yL+cOKDuymvihkfol83TYbLbOw+W/wv4" crossorigin="anonymous"></script><script>
$(document).ready(function() {
// Instructions expand/collapse
var content = $('#instructionBody');
var trigger = $('#collapseTrigger');
content.hide();
$('.collapse-text').text('(Click to expand)');
trigger.click(function(){
content.toggle();
var isVisible = content.is(':visible');
if(isVisible){
$('.collapse-text').text('(Click to collapse)');
}else{
$('.collapse-text').text('(Click to expand)');
}
});
// end expand/collapse
});
</script></div>
</section>
<p> </p>
The entries may be more than one space which would not be an empty String.
You can use the following function to check if a String is null, empty, or only spaces:
function isNullOrEmpty(str){
return !str.trim().length;
}
<input id="testinput" type="text" onkeyup="checkEmpty()"/>
<br/>
<span id="result"></span>
<script>
var result = document.getElementById("result");
function isNullOrEmpty(str){
return !str.trim().length;
}
function checkEmpty(){
var input = document.getElementById("testinput").value;
if(isNullOrEmpty(input)){
result.innerHTML = "Empty string";
} else {
result.innerHTML = "Non-empty string";
}
}
</script>
Form with check to see if all fields are filled in:
<form id="thisForm">
<label for="username"><b>Username:</b></label><br/>
<input type="text" id="username">
<br/>
<label for="password"><b>Password:</b></label><br/>
<input type="password" id="password">
<br/>
<input type="button" value="Submit" onClick="validateForm()">
</form>
<span id="result"></span>
<script>
var result = document.getElementById("result");
function isNullOrEmpty(str){
return !str.trim().length;
}
function validateForm(){
result.innerHTML = "";
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var passed = true;
if(isNullOrEmpty(username)){
result.innerHTML += "<p/><b style='color: red;'>Username can not be empty!</b>";
passed = false;
}
if(isNullOrEmpty(password)){
result.innerHTML += "<p/><b style='color: red;'>Password can not be empty!</b>";
passed = false;
}
if(passed){
document.getElementById("thisForm").style.display = "none";
result.innerHTML = "<h1>Form submitted successfully!</h1>";
}
}
</script>
The code sample is:
<body>
<h4 style="position:absolute;left:200px;top:120px;">Mark skills to add</h4>
<div class=""style="position:absolute;top:170px;left:120px;width:1100px;background-color:#CCC;padding-bottom:50px;padding:20px;">
<form class="" action="AddSkills">
<h4 style="">Business Accounting Human Resources and Legal</h4>
<p style="float:left;width:200px;height:30px;"><input type="checkbox" value="79" name="skill0"/> Accounting</p>
<p style="float:left;width:200px;height:30px;"><input type="checkbox" value="80" name="skill1"/> Audit </p>
<h4 style="">Data Entry and Admin</h4>
<p style="float:left;width:200px;height:30px;"><input type="checkbox" value="56" name="skill6"/> Article submission</p>
<p style="float:left;width:200px;height:30px;"><input type="checkbox" value="57" name="skill7"/> Data entry </p>
<input type="hidden" value="<%=tot%>" name="tot"/>
<input style=""type="submit" value="Add selected skills" class="btn btn-danger">
</form>
</div>
</body>
I want the output to be like the one when using display:inline; (inside <p></p>) and the spacing to be like the one when using float:left;(inside <p></p>)
How do I do this?
P.S. -> I am fetching the contents from database on a jsp page. The code here is from the view-source
Try using display: inline-block.
Try using inline-block for paragraph and give width using percentages as below code
<body>
<h4>Mark skills to add</h4>
<div>
<form class="" action="AddSkills">
<h4 style="margin:0px;padding:0px;">Business Accounting Human Resources and Legal</h4>
<div style="width:100% !important;display:block; margin:0px; padding:0px;clear:both;">
<p style="display:inline-block;float:left;width:22%;"><input type="checkbox" value="79" name="skill0"/> Accounting</p>
<p style="display:inline-block;float:left;width:22%;"><input type="checkbox" value="80" name="skill1"/> Audit </p> </div>
<h4 style="margin:0px;padding:0px;display:block;width:100%;clear:both;">Data Entry and Admin</h4>
<div style="clear:both"> <p style="display:inline-block;float:left;width:22%;"><input type="checkbox" value="56" name="skill6"/> Article submission</p>
<p style="display:inline-block;float:left;width:22%;"><input type="checkbox" value="57" name="skill7"/> Data entry </p> </div>
</form>
</div>
</body>
Instead of dealing with this many div and inline styles use table add each title as one row and choices as cells of the row under it. then set the table width to 100%
I have a select list of genders.
Code:
<select>
<option>male</option>
<option>female</option>
<option>others</option>
</select>
I want to use an image in drop down list as drop-down-icon.jpeg.
I want to add a button in place of drop down icon.
How to do that?
In Firefox you can just add background image to option:
<select>
<option style="background-image:url(male.png);">male</option>
<option style="background-image:url(female.png);">female</option>
<option style="background-image:url(others.png);">others</option>
</select>
Better yet, you can separate HTML and CSS like that
HTML
<select id="gender">
<option>male</option>
<option>female</option>
<option>others</option>
</select>
CSS
select#gender option[value="male"] { background-image:url(male.png); }
select#gender option[value="female"] { background-image:url(female.png); }
select#gender option[value="others"] { background-image:url(others.png); }
In other browsers the only way of doing that would be using some JS widget library, like for example jQuery UI, e.g. using Selectable.
From jQuery UI 1.11, Selectmenu widget is available, which is very close to what you want.
With countries, languages or currency you may use emojis.
Works with pretty much every browser/OS that supports the use of emojis.
select {
height: 50px;
line-height: 50px;
font-size: 12pt;
}
<select name="countries">
<option value="NL">🇳🇱 Netherlands</option>
<option value="DE">🇩🇪 Germany</option>
<option value="FR">🇫🇷 France</option>
<option value="ES">🇪🇸 Spain</option>
</select>
<br /><br />
<select name="currency">
<option value="EUR">🇪🇺 € EUR 💶</option>
<option value="GBP">🇬🇧 £ GBP 💷</option>
<option value="USD">🇺🇸 $ USD 💵</option>
<option value="YEN">🇯🇵 ¥ YEN 💴</option>
</select>
You can use iconselect.js; Icon/image select (combobox, dropdown)
Demo and download; http://bug7a.github.io/iconselect.js/
HTML usage;
<div id="my-icon-select"></div>
Javascript usage;
var iconSelect;
window.onload = function(){
iconSelect = new IconSelect("my-icon-select");
var icons = [];
icons.push({'iconFilePath':'images/icons/1.png', 'iconValue':'1'});
icons.push({'iconFilePath':'images/icons/2.png', 'iconValue':'2'});
icons.push({'iconFilePath':'images/icons/3.png', 'iconValue':'3'});
iconSelect.refresh(icons);
};
My solution is to use Font Awesome and then add library icons as text, using the unicode in HTML directly.
You just need the Unicode value for whatever icon you want, and they are all found here: Font Awesome full list of icons, including unicode
Here is an example state filter:
<select name='state' style='height: 45px; font-family:Arial, Font Awesome;'>
<option value=''> All States</option>
<option value='enabled' style='color:green;'> Enabled</option>
<option value='paused' style='color:orange;'> Paused</option>
<option value='archived' style='color:red;'> Archived</option>
</select>
Note the font-family:Arial, FontAwesome; is required to be assigned in style for select like given in the example.
You already have several answers that suggest using JavaScript/jQuery. I am going to add an alternative that only uses HTML and CSS without any JS.
The basic idea is to use a set of radio buttons and labels (that will activate/deactivate the radio buttons), and with CSS control that only the label associated to the selected radio button will be displayed. If you want to allow selecting multiple values, you could achieve it by using checkboxes instead of radio buttons.
Here is an example. The code may be a bit messier (specially compared to the other solutions):
.select-sim {
width:200px;
height:22px;
line-height:22px;
vertical-align:middle;
position:relative;
background:white;
border:1px solid #ccc;
overflow:hidden;
}
.select-sim::after {
content:"▼";
font-size:0.5em;
font-family:arial;
position:absolute;
top:50%;
right:5px;
transform:translate(0, -50%);
}
.select-sim:hover::after {
content:"";
}
.select-sim:hover {
overflow:visible;
}
.select-sim:hover .options .option label {
display:inline-block;
}
.select-sim:hover .options {
background:white;
border:1px solid #ccc;
position:absolute;
top:-1px;
left:-1px;
width:100%;
height:88px;
overflow-y:scroll;
}
.select-sim .options .option {
overflow:hidden;
}
.select-sim:hover .options .option {
height:22px;
overflow:hidden;
}
.select-sim .options .option img {
vertical-align:middle;
}
.select-sim .options .option label {
display:none;
}
.select-sim .options .option input {
width:0;
height:0;
overflow:hidden;
margin:0;
padding:0;
float:left;
display:inline-block;
/* fix specific for Firefox */
position: absolute;
left: -10000px;
}
.select-sim .options .option input:checked + label {
display:block;
width:100%;
}
.select-sim:hover .options .option input + label {
display:block;
}
.select-sim:hover .options .option input:checked + label {
background:#fffff0;
}
<div class="select-sim" id="select-color">
<div class="options">
<div class="option">
<input type="radio" name="color" value="" id="color-" checked />
<label for="color-">
<img src="http://placehold.it/22/ffffff/ffffff" alt="" /> Select an option
</label>
</div>
<div class="option">
<input type="radio" name="color" value="red" id="color-red" />
<label for="color-red">
<img src="http://placehold.it/22/ff0000/ffffff" alt="" /> Red
</label>
</div>
<div class="option">
<input type="radio" name="color" value="green" id="color-green" />
<label for="color-green">
<img src="http://placehold.it/22/00ff00/ffffff" alt="" /> Green
</label>
</div>
<div class="option">
<input type="radio" name="color" value="blue" id="color-blue" />
<label for="color-blue">
<img src="http://placehold.it/22/0000ff/ffffff" alt="" /> Blue
</label>
</div>
<div class="option">
<input type="radio" name="color" value="yellow" id="color-yellow" />
<label for="color-yellow">
<img src="http://placehold.it/22/ffff00/ffffff" alt="" /> Yellow
</label>
</div>
<div class="option">
<input type="radio" name="color" value="pink" id="color-pink" />
<label for="color-pink">
<img src="http://placehold.it/22/ff00ff/ffffff" alt="" /> Pink
</label>
</div>
<div class="option">
<input type="radio" name="color" value="turquoise" id="color-turquoise" />
<label for="color-turquoise">
<img src="http://placehold.it/22/00ffff/ffffff" alt="" /> Turquoise
</label>
</div>
</div>
</div>
Another jQuery cross-browser solution for this problem is http://designwithpc.com/Plugins/ddSlick which is made for exactly this use.
This is using ms-Dropdown : https://github.com/marghoobsuleman/ms-Dropdown
Data resource is json. But you dont need to use json. If you want you can use with css.
Css example : https://github.com/marghoobsuleman/ms-Dropdown/tree/master/examples
Json Example : http://jsfiddle.net/tcibikci/w3rdhj4s/6
HTML
<div id="byjson"></div>
Script
<script>
var jsonData = [
{description:'Choos your payment gateway', value:'', text:'Payment Gateway'},
{image:'https://via.placeholder.com/50', description:'My life. My card...', value:'amex', text:'Amex'},
{image:'https://via.placeholder.com/50', description:'It pays to Discover...', value:'Discover', text:'Discover'},
{image:'https://via.placeholder.com/50', title:'For everything else...', description:'For everything else...', value:'Mastercard', text:'Mastercard'},
{image:'https://via.placeholder.com/50', description:'Sorry not available...', value:'cash', text:'Cash on devlivery', disabled:true},
{image:'https://via.placeholder.com/50', description:'All you need...', value:'Visa', text:'Visa'},
{image:'https://via.placeholder.com/50', description:'Pay and get paid...', value:'Paypal', text:'Paypal'}
];
$("#byjson").msDropDown({byJson:{data:jsonData, name:'payments2'}}).data("dd");
}
</script>
For those wanting to display an icon, and accepting a "black and white" solution, one possibility is using character entities:
<select>
<option>100 €</option>
<option>89 £</option>
</select>
By extension, your icons can be stored in a custom font.
Here's an example using the font FontAwesome: https://jsfiddle.net/14606fv9/2/
https://jsfiddle.net/14606fv9/2/
One benefit is that it doesn't require any Javascript.
However, pay attention that loading the full font doesn't slow down the loading of your page.
Nota bene:
The solution of using a background image doesn't seem working anymore in Firefox (at least in version 57 "Quantum"):
<select>
<option style="background-image:url(euro.png);">100</option>
<option style="background-image:url(pound.png);">89</option>
</select>
For a two color image, you can use Fontello, and import any custom glyph you want to use. Just make your image in Illustrator, save to SVG, and drop it onto the Fontello site, then download your custom font ready to import. No JavaScript!
Alvaros JS free answer was a great start for me, and I really tried to get a truly JS-free answer that still delivered all the functionality expected of a Select with images, but sadly nesting forms was the down-fall. I'm posting two solutions here; my main solution that uses 1 line of JavaScript, and a totally JavaScript-free solution that won't work inside another form, but might be useful for nav menus.
Unfortunately there is a bit of repetition in the code, but when you think about what a Select does it makes sense. When you click on an option it copies that text to the selected area, i.e., clicking 1 of 4 options will not change the 4 options, but the top will now repeat the one you clicked. To do this with images would require JavaScript, orrrr... you duplicate the entries.
In my example we have a list of games (Products), which have versions. Each product may also have Expansions, which can also have versions. For each Product we give the user a list of each version if there's more than one, along with an image and version specific text.
<h4>#Model.Name</h4>
#if (Model.Versions.Count == 1)
{
<div class="rich-select-option-body pl-2">
<img src="#Model.Versions[0].ImageUrl" alt="">#Model.Versions[0].VersionName (#Model.Versions[0].Year)
</div>
}
else
{
<h5>Select the version</h5>
<div class="rich-select custom-select">
<div class="rich-select-dropdown">
#foreach (var version in Model.Versions)
{
<div class="rich-select-option">
<input type="radio" name="game" id="game-#version.ProductId-#version.VersionId" #if (version == Model.Versions.First()) { #Html.Raw(" checked") ; } />
<div class="rich-select-option-body">
<label tabindex="-1">
<img src="#version.ImageUrl" alt="">#version.VersionName (#version.Year)
</label>
</div>
</div>
}
</div>
<input type="checkbox" id="rich-select-dropdown-button" class="rich-select-dropdown-button" />
<label for="rich-select-dropdown-button"></label>
<div class="rich-select-options">
#foreach (var version in Model.Versions)
{
<div class="rich-select-option">
<div class="rich-select-option-body">
<label for="game-#version.ProductId-#version.VersionId" tabindex="-1" onclick="document.getElementById('rich-select-dropdown-button').click();">
<img src="#version.ImageUrl" alt=""> #version.VersionName (#version.Year)
</label>
</div>
</div>
}
</div>
</div>
}
Using JS for the checkbox deselection we can have multiple instances on a form. Here I've extended to show a list of Expansions, which also have the same logic around versions.
<h5 class="mt-3">Include Expansions?</h5>
#foreach (var expansion in Model.Expansions)
{
<div class="form-row">
<div class="custom-control custom-checkbox w-100">
<input type="checkbox" class="expansion-checkbox custom-control-input" id="exp-#expansion.ProductId">
<label class="custom-control-label w-100" for="exp-#expansion.ProductId">
#if (expansion.Versions.Count == 1)
{
<div class="rich-select-option-body pl-2">
<img src="#expansion.ImageUrl" />#expansion.Name: #expansion.Versions[0].VersionName (#expansion.Versions[0].Year)
</div>
}
else
{
<div class="rich-select custom-select">
<div class="rich-select-dropdown">
#foreach (var version in expansion.Versions)
{
<div class="rich-select-option">
<input type="radio" name="exp-#version.ProductId" id="exp-#version.ProductId-#version.VersionId" #if (version == expansion.Versions.First()) { #Html.Raw(" checked") ; } />
<div class="rich-select-option-body">
<label tabindex="-1">
<img src="#version.ImageUrl" alt="">#expansion.Name: #version.VersionName (#version.Year)
</label>
</div>
</div>
}
</div>
<input type="checkbox" id="rich-select-dropdown-button-#expansion.ProductId" class="rich-select-dropdown-button" />
<label for="rich-select-dropdown-button-#expansion.ProductId"></label>
<div class="rich-select-options">
#foreach (var version in expansion.Versions)
{
<div class="rich-select-option">
<div class="rich-select-option-body">
<label for="exp-#version.ProductId-#version.VersionId" tabindex="-1" onclick="document.getElementById('rich-select-dropdown-button-#expansion.ProductId').click();">
<img src="#version.ImageUrl" alt="">#expansion.Name: #version.VersionName (#version.Year)
</label>
</div>
</div>
}
</div>
</div>
}
</label>
</div>
</div>
Of course this requires a fair bit of CSS, which I've only included in this JSFiddle to reduce the size of this already massive answer. I've used Bootstrap 4 to reduce the amount needed, and also to allow it to fit in with other Bootstrap controls and any site customisations that have been made.
The images are set to 75px, but this can easily be changed in 5 lines in .rich-select and .rich-select-option-body img
I propose an alternative
when I'm in a difficult situation like this using dxlookup from devexpress
Examples:https://js.devexpress.com/Demos/WidgetsGallery/Demo/Lookup/Templates/jQuery/Light/
I tried several jquery based custom select with images, but none worked in responsive layouts. Finally i came accross Bootstrap-Select. After some modifications i was able to produce this code.
Code and github repo here
I got the same issue. My solution was a foreach of radio buttons, with the image at the right of it. Since you can only choose a single option at radio, it works (like) a select.
Worked well for me.
I was struggling with the same problem: how to create a language selector with flags. I came up with a :ḧover solution without javascript. It does involve some server-side processing to set a class in the HTML.
The code can be easily generated from PHP or nodejs or Angular/Typescript. In this example there are 3 images contained in an A-element (< a href='./?lang=..."> ).
The trick is that you should fetch the URL GET parameter lang and set the class selected so it will be the only one visible.
The CSS hinges on the fact that there is only one flag visible based on the class selected being present. When the mouse hovers over the container (<div class="languageselect">.....</div>) the CSS will show all flags by overriding the classes div.flag:not(.selected) and div.flag.selected and setting display:block . Then the <a href="..."> will be available to the users.
Of course there is lots of other styling possible to increase useability. This is just a starting point.
Please note the first part of the CSS-line will put the language selector on top on a fixed position. This also helps prevent the flag-container to span a whole line, messing up the :hover detection.
Happy coding!
WOrking example here: codepen
HTML:
<div class="languageselect">
<div class="select">
<div class="flag ">
<a href="./?lang=en">
<img src="https://www.sciencekids.co.nz/images/pictures/flags120/United_Kingdom.jpg">
</a>
</div>
<div class="flag selected">
<a href="./?lang=en_us">
<img src="https://www.sciencekids.co.nz/images/pictures/flags120/United_States.jpg">
</a>
</div>
<div class="flag ">
<a href="./?lang=nl">
<img src="https://www.sciencekids.co.nz/images/pictures/flags96/Netherlands.jpg">
</a>
</div>
</div>
</div>
CSS:
.languageselect {
position: absolute;
top: 0;
left:0;
z-index: 1000;
}
.languageselect img {
max-height: 20px;
}
.languageselect div.flag:not(.selected) {
display: none;
}
.languageselect div.flag.selected {
display: block;
}
.languageselect:hover div.flag {
display:block;
}
UPDATE: As of 2018, this seems to work now. Tested in Chrome, Firefox, IE and Edge
UPDATE: Yes I changed the background-color, not the image, stop voting me down, showing that you can change style here is still a useful contribution.
<!DOCTYPE html>
<html>
<body>
<style>
select#newlocale option[value="volvo"] { background-color: powderblue; }
select#newlocale option[value="opel"] { background-color: red; }
select#newlocale option[value="audi"] { background-color: green; }
</style>
<select id="newlocale">
<option value="volvo"><div >Volvo</div></option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>