We Keep Coding

Select is invisible because of linear-gradient in Chrome

I have a select box and I use a linear gradient as a background. In Firefox everything works fine, but in Chrome, I have to hover to see the options because the text is white and the background is white too. See the image bellow:
I'm think in removing the linear gradient, because I can't use jQuery, Javascript or PHP is OK. Someone knows the best way to solve this?
Here is a codepen to help.
select {
color: #fff;
background-color: #12964f;
background: linear-gradient(#4eba71, #12964f);
}
<select name="" id="">
<option value="">first value</option>
<option value="">second value</option>
<option value="">third value</option>
</select>

select {
color: #fff;
background-color: #12964f;
background: linear-gradient(#4eba71, #12964f);
}
select option {
color: #000;
}
<select name="" id="">
<option value="">first value</option>
<option value="">second value</option>
<option value="">third value</option>
</select>
You can add color:#000 to the options, which won't affect the selected option.
http://codepen.io/anon/pen/GWBOqx

Bold the 1st value in dropdown

I have to make the 1st value in the dropdown text to bold. I tried with ng-class attribute as the UI is developed in angularjs but didn't get success. Now, I am trying with css by making use of first-child selector. I tried with following styles.
1)
select#ad-version-select.form-control : first-child {
font-weight: bold;
}
2)
select#ad-version-select.form-control >: first-child {
font-weight: bold;
}
But the above styles. didn't worked. If I use
select#ad-version-select.form-control {
font-weight: bold;
}
All values in dropdown are becoming bold. How to make only the 1st value in the dropdown to appear bold? I can't use javascript or jquery. Please help me with css.

try this way
select#ad-version-select.form-control option:nth-child(1){
font-weight:bold;
}

You should try like this-
select#ad-version-select.form-control option:first-child {
font-weight: bold;
}
<select name="" id="ad-version-select" class="form-control">
<option value="">option</option>
<option value="">option</option>
<option value="">option</option>
<option value="">option</option>
</select>

select#ad-version-select.form-control option:nth-child(1) {
font-weight: bold;
}
will do the job but it works only in firefox and not in google chrome or in safari.

Actually you can't bold the options.
The only method to highlight or bold is make it an option group
<select>
<optgroup label="Label Group">
<option value="label value 1">Label 1</option>
<option value="Label value 2">Label 2</option>
</optgroup>
<optgroup label="Label Group 2">
<option value="label value 3">Label 3</option>
<option value="label value 4">Label 4</option>
</optgroup>
</select>
You can try here W3Schools

How do i change the color of the buttons html/javascript [duplicate]

How do you set the background color of an item in an HTML list?

select.list1 option.option2
{
background-color: #007700;
}
<select class="list1">
<option value="1">Option 1</option>
<option value="2" class="option2">Option 2</option>
</select>

I assume you mean the <select> input element?
Support for that is pretty new, but FF 3.6, Chrome and IE 8 render this all right:
<select name="select">
<option value="1" style="background-color: blue">Test</option>
<option value="2" style="background-color: green">Test</option>
</select>

I had this problem too. I found setting the appearance to none helped.
.class {
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
background-color: red;
}

Just like normal background-color: #f0f
You just need a way to target it, eg: <option id="myPinkOption">blah</option>

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...

Adding validation to an HTML select box

I want to make one simple validation check on my HTML form. I'd like it so that if the user chooses the 18 - 24, an error appears next to the drop down select: 'You must be 25+'.
<select class="element select medium" id="element_3" name="element_3">
<option value="" selected="selected"></option>
<option value="1" class="error" id="error">18 - 24</option>
<option value="2" >25 - 34</option>
<option value="3" >35 - 44</option>
<option value="4" >45 +</option>
I've tried adding both a class and ID to value 1. Then I tried something like:
function hidestuff(page){
document.getElementById(error).style.visibility="hidden";
}
function showstuff(error){
document.getElementById(error).style.visibility="visible";
}
Attempting to toggle show and hide with JavaScript. Hoping something like if on page ID hide this message, when error div toggled display. But this didn't work. I did add the corresponding CSS too. Any pointers on how to write this correctly?

Something like this can be achieved with a bit of jQuery:
Here's a JSFiddle
jQuery:
$(document).ready(function() {
$('#errorMsg').hide(); //ensure the error message is hidden
$('#element_3').on('change',function() {
// any option that has the class "error" will cause the error msg to be
// displayed (just in case you feel like adding a 0-17 option later)
// To target an element by ID, use $(this).find(":selected").attr('id') == 'error'
if ($(this).find(":selected").hasClass('error')) {
$('#errorMsg').show();
} else {
$('#errorMsg').hide();
}
});
});
and a bit of HTML:
<select class="element select medium" id="element_3" name="element_3">
<option value="" selected="selected"></option>
<option value="1" class="error" id="error">18 - 24</option>
<option value="2" >25 - 34</option>
<option value="3" >35 - 44</option>
<option value="4" >45 +</option>
</select>
<div id="errorMsg">You must be over 25</div>
and why not style it up with some CSS:
#errorMsg {
display: inline-block;
background-color: #fdd;
font: 12pt arial;
color: #f00;
padding: 2px 5px 2px 5px;
border: 1px solid #f00;
border-radius: 5px;
width: 200px;
}

I think what you must be doing is something like this
<select id="myselect" onchange="check();">
<option value="0">Select option</option>
<option value="1">op1</option>
<option value="2">op3</option>
</select>
<div id="error" style="display:none;">Error mesage</div>
<div id="page" style="width:100px;height:100px;border:1px solid black;display:none;">my page</div>
<script>
function check() {
switch (parseInt($('#myselect').val())) {
case 0:
$('#error').show();
$('#page').hide();
break;
case 1:
$('#error').show();
$('#page').hide();
break;
case 2:
$('#error').hide();
$('#page').show();
break;
}
}
</script>
http://jsfiddle.net/SS3gc/4/