We Keep Coding

Single-selectable listview in pure HTML/CSS?

By default a <select> element is a dropdown menu which I don't want: I want to display the full list. This is possible with multiple:
<select name="pets" multiple size="5">
<option>dog</option>
<option>cat</option>
<option>hamster</option>
<option>bird</option>
<option>donkey</option>
<option>fish</option>
</select>
but then obviously the user can select multiple elements.
How to have a full list view (like with multiple, i.e. no dropdown menu), but have only one possible selected element?

Use the size attribute which takes the number of items you want to display and set it to the number of options you have (6) in order to get the full list view. Since you only want to allow 1 item to be selected, also remove the attribute multiple from the select element.
<select name="pets" size=6>
<option>dog</option>
<option>cat</option>
<option>hamster</option>
<option>bird</option>
<option>donkey</option>
<option>fish</option>
</select>
Check mdn for more information about the available attributes for the select element.

You can make the <select> 100% of the height of the <form> that contains it. See this fiddle for an example of a div enclosing a form, with a select filling the height of the form.
This starts with a simple structure, just enough that the form is enclosed in something so you can see the relative layout.
<div>
<form>
<select id="thelist" name="pets" size="6">
<option value="1">dog</option>
<option value="2">cat</option>
<option value="3">hamster</option>
<option value="4">bird</option>
<option value="5">donkey</option>
<option value="6">fish</option>
</select>
</form>
</div>
I give the div a height, a background so you can see it, and padding so it's content doesn't naturally cover it. Make the form any height you want, including 100% of the div. I made it 90% so you can still see the enclosing div. Notice the form's width fills the div width except for the padding.
You can then just set the height of the select list to anything you want inside the form. Here's my CSS
div {
background-color: #fff0f0;
height: 40em;
padding: 1.5em 1.5em 0 1.5em;
}
form {
background-color: #f0f0f0;
height: 90%;
}
#thelist {
height: 100%;
}
Put together as a snippet, and making it smaller to fit better here...
div {
background-color: #fff0f0;
height: 20em;
padding: 1.5em 1.5em 0 1.5em;
}
form {
background-color: #f0f0f0;
height: 40%;
}
#thelist {
height: 100%;
}
<div>
<form>
<select id="thelist" name="pets" size="6">
<option value="1">dog</option>
<option value="2">cat</option>
<option value="3">hamster</option>
<option value="4">bird</option>
<option value="5">donkey</option>
<option value="6">fish</option>
</select>
</form>
</div>

I've tested a few solutions and found that you had to remove the multiple attribute from the <select> element
<select name="pets" size="5">
<option>dog</option>
<option>cat</option>
<option>hamster</option>
<option>bird</option>
<option>donkey</option>
<option>fish</option>
</select>

Change multiple select to a single select dropdown

I'm having an issue with a multiple select. The only way that can works what I am trying to make is with a multiple select, but I need to transform it to a single dropdown select because that way is design.
The question is: How can I transform a multiple select in a single select? I add a screenshot:
I have it like this:
and the design should be like this:
Is there anyway for transform it with html or css without remove the multiple="multiple" property?
My tag:
<select multiple="multiple" class="destination_s input input--select"></select>
Regards

The only way I see is to stylize a div that looks like an HTML select and with JavaScript show and hide the select Multiple. This is a quick example I just made (maybe the code could be better):
function showSelect(classname) {
document.getElementById('sel').className = classname;
}
.hidden {
display: none;
}
.visible {
display: block;
}
.div {
border: 1px solid black;
width: 100px;
}
#sel {
width: 100%;
}
.arrow {
float: right;
}
<div class="div" onmouseover="showSelect('visible')" onmouseout="showSelect('hidden')">
Choose... <span class="arrow">▼</span>
<select multiple="multiple" class="hidden" id="sel">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
</select>
</div>
Also consider use a framework like Chosen to make it more easily.

i got your point but it cant be possible with the help of HTML/CSS only.
You need have JS or jQuery at some point.
Please refer below plugins which might help you to sort it out.
http://wenzhixin.net.cn/p/multiple-select/docs/
https://www.jqueryscript.net/form/jQuery-Plugin-For-Multiple-Select-With-Checkboxes-multi-select-js.html
you can also use Chosen, Select2 Plugins too.

Jquery toggle class on select when selecting the placeholder option

I am very new on JQuery, and despite my research and workarounds, i don't find out the right way to code what I want to achieve here.
So, here's the situation. I have a dropdown list like this:
<select name="your-country" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false">
<option value="">Your Country*</option>
<option value="France">France</option>
<option value="Belgium">Belgium</option>
<option value="Switzerland">Switzerland</option>
</select>
I want my dropdown list to be grey whenever the first placeholder "Your Country*" option is selected, and black when another option is selected.
select{
color: #000;
}
select.my-placeholder{
color: #666 !important;
}
I want to create a simple jquery block of code that adds the class .my-placeholder whenever the first option (with no value) is selected, and discard it whenever another option is selected. (I want no change in the HTML code)
How can I achieve that ?
Thank you

You can create a function which will respond to change event and selection check the value and add corresponding class
function updateColor() {
let getSelectedValue = $('select[name="your-country"]').val();
if (getSelectedValue === "") {
$('select[name="your-country"]').find('option').addClass('my-placeholder');
} else {
$('select[name="your-country"]').find('option').removeClass('my-placeholder').addClass('select');
}
}
.select {
color: red;
}
.my-placeholder {
color: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="your-country" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false" onchange="updateColor()">
<option value="">Your Country*</option>
<option value="France">France</option>
<option value="Belgium">Belgium</option>
<option value="Switzerland">Switzerland</option>
</select>

javascript stops working when switching from text field to select

I'm trying to do javascript, but I'm a ruby guy and really suck with javascript. I have a one field form (text field and submit button) in which javascript only allows the form to be submitted if there is text in the field. However, I switched the field type from a text field to a select. Now, the form can't submit. I am almost certain the problem is with my javascript. Here is the code I have that word with a text field. How do I get it to work with the select?
Form:
<form id="new_skill" class="new_skill" method="post" action="/skills" >
<li>
<input id="resume-field" class="field field288" type="text"
value="Type a speciality you want to add to your profile"
title="Type a speciality you want to add to your profile"
name="skill[label]"></input>
</li>
<li>
<input class="button button-add button-add-disabled"
type="submit" value="ADD +" name="commit"></input>
</li>
</form>
Javascript:
(function($){
$(document).on('focusin', '#resume-field', function() {
$(this).parents().find('.button-add-disabled').removeClass('button-add-disabled');
}).on('focusout', '#resume-field', function(){
if(this.value==' '||this.title==this.value) {
$(this).parents().find('.button-add').addClass('button-add-disabled');
} else {
$(this).parents().find('.button-add').removeClass('button-add-disabled');
}
});
$('.button-add-disabled').click(function(){
return !$(this).hasClass('button-add-disabled');
});
}(jQuery));
css:
.button-add { width: 49px; height: 28px; border: solid 1px #8c8c8c; display: block;
font-size: 11px; line-height: 28px ; color: #fff; text-align: center;
font-family: 'Ubuntu', sans-serif; transition: none; margin: 0 0 0 auto;
border-radius: 3px; }
.button-add:hover { text-decoration: none;
-webkit-transition:none;
-moz-transition:none;
-ms-transition:none;
-o-transition:none;
transition:none;
}
.button-add-disabled { background: url(/assets/add-specialities-disabled.png)
repeat-x 0 0; box-shadow: 0 0 0 0; margin-left:35px; }
.button-add-disabled:hover { background: url(/assets/add-specialities-disabled.png)
repeat-x 0 0; box-shadow: 0 0 0 0; }
Html for form with drop down:
<select id="resume-field" name="skill[label]">
<option value="1" title="option_1"></option>
<option value="2" title="option 2" selected="selected"></option>
</select>

I made a minimal example (jsfiddle), doing what I think you asked for, but not using your code. You can probably adapt it if it does what you want.
HTML
<form>
<select id="selectme">
<option value="">-- Please select one --</option>
<option value="1">1</option>
<option value="2">Two</option>
<option value="3">III</option>
</select>
<input type="submit" value="submit" id="clickme">
</form>
JS
$(function(){
$("#clickme").prop("disabled", true);
$("#selectme").change(function(){
if ($("#selectme").val() != "") {
$("#clickme").removeAttr("disabled");
} else {
$("#clickme").prop("disabled", true);
}
});
})
CSS
#clickme {
background-color: #f00;
}
#clickme:disabled {
background-color: #eee;
}

you stated that you have switched the input field type from text to select. Therefore you need to add this kind of html:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

To start, your HTML is a little bit off:
<form id="new_skill" class="new_skill" method="post" action="/skills" >
<!-- needs a parent UL element -->
<li>
<input id="resume-field" class="field field288" type="text"
value="Type a speciality you want to add to your profile"
title="Type a speciality you want to add to your profile"
name="skill[label]"></input>
<!-- as a side not, input tags can be self-close (<input type="text" />)
</li>
<li>
<input class="button button-add button-add-disabled"
type="submit" value="ADD +" name="commit"></input>
</li>
</form>
If you've changed your input to a select element, then you need option elements, of which each can have a "value" attribute, as follows:
<select>
<option value="something">Something</option>
</select>
In the context of what you are trying to do, I'm not sure that a select element would fit your needs if you are wanting the user to type something in... You could pre-fill the select element with option elements, each corresponding to a specific "specialty that they want to add to their profile".

UPDATED and SIMPLIFIED:
Assuming that you did change the <input> elements to <select><option></select> elements, your code will work fine with only minor changes.
jsFiddle Demo
Really, you only need to track the change event:
HTML:
<form id="new_skill" class="new_skill" method="post" action="/skills" >
<li>
Select a specialty to add to your profile:<br>
<select id="resume-field" name="skill[label]">
<option value="default">Select a speciality:</option>
<option value="cod3r">Programming</option>
<option value="pizza">Pizza consumption</option>
</select>
</li>
<li>
<input class="button button-add button-add-disabled"
type="submit" value="ADD +" name="commit"></input>
</li>
</form>
javascript/jQuery:
$(document).on('change', '#resume-field', function() {
if(this.value=='default') {
$(this).parents().find('.button-add').addClass('button-add-disabled');
} else {
$(this).parents().find('.button-add').removeClass('button-add-disabled');
}
});
PS: Of course, to make the jsFiddle work I also had to temporarily remove the url() etc from your css...

jquery select-box - how can I have two inputs different widths

I'm using this jquery plugin to make my select dropdown boxes look nicer. http://code.google.com/p/select-box/
Here's a fiddle of it working:
http://jsfiddle.net/FQKax/1/
I want to have the two dropdowns to be different widths but I've tried wrapping them in divs, tried to hack the js to give them different ids, everything I can think of but no joy.
Also I'm ashamed to admit I can't seem to change the color of the text in the actual dropdown bit. I can change the backgound colour etc but buggered if I can change the color of the text... weird

There's an option that you can specify what to use as classname for the sbHolder object, but you don't want to change that since you would need to rewrite the CSS. It'd be nice if they let you set an additional class to apply, but they don't.
I would just put a wrapper around the select element and use CSS to override the default width http://jsfiddle.net/FQKax/8/
.wrapper-one .sbHolder{
width: 500px;
}
.wrapper-two .sbHolder {
width: 200px;
}
<div class="wrapper-one">
<select id="language">
<option value="javascript">Javascript</option>
<option value="objective-c">Objective C</option>
<option value="python">Python</option>
</select>
</div>
<br/><br/>
<div class="wrapper-two">
<select id="language2">
<option value="javascript">Javascript</option>
<option value="objective-c">Objective C</option>
<option value="python">Python</option>
</select>
</div>
This requires adding some markup, #cih's answer doesn't. It just requires using jQuery to mark each instance accordingly http://jsfiddle.net/FQKax/37/
$("#language").selectbox();
$("#language2").selectbox();
$(".sbHolder").each(function(index){
$(this).addClass('instance-' + index);
});
.instance-0.sbHolder{
width: 500px;
}
.instance-1.sbHolder {
width: 200px;
}

$(".sbHolder").first().addClass("first");
That will add a class you can target on you first checkbox, there better way to iterate through multiple selectors, check out this link..
Other than that Joe answers the rest of your question.

Try this
http://jsfiddle.net/FQKax/30/
<link href="http://select-box.googlecode.com/svn/tags/0.2/jquery.selectbox.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://select-box.googlecode.com/svn/tags/0.2/jquery.selectbox-0.2.min.js"></script>
<select id="language">
<option value="javascript">Javascript</option>
<option value="objective-c">Objective C</option>
<option value="python">Python</option>
</select>
<br/><br/>
<select id="language2">
<option value="javascript">Javascript</option>
<option value="objective-c">Objective C</option>
<option value="python">Python</option>
</select>
##### JQUERY #######
$(function () {
$("#language").selectbox();
$("#language2").selectbox();
$(".sbHolder").each(function(){
var $langDom = $(this);
if($langDom.prev().attr('id') == 'language'){
$langDom.addClass("language_1");
} else if($langDom.prev().attr('id') == 'language2') {
$langDom.addClass("language_2");
}
});
});
###### CSSS TO ADD #####
.language_1{
width: 1200px;
}
.language_2{
width: 200px;
}
​

For the text color, change .sbOptions a:link, .sbOptions a:visited {} and/or .sbOptions a:hover, .sbOptions a:focus, .sbOptions a.sbFocus {}.
For the widths, .sbOptions is your dropdown width, and .sbHolder {} is the width of the "currently selected" item.