I have a drop down list like nothing, name1, name2, name3, name4 and etc,... When I select nothing only the alert popup should display where as popup should not display when I select others.
Any ideas?
$(document).ready(function(){
$("#dropdown_change").change(function(){
if(document.getElementById("dropdown_change").value == "nothing"){
alert("nothing");
$("#popup").css("display", "block");
}
});
});
#popup{
position: fixed;
margin:auto;
background: rgba(0,0,0,0.5);
display: none;
top: 0;
left: 0;
bottom:0;
right:0;
width: 300px;
height: 200px;
border: 1px solid #000;
border-radius: 5px;
padding: 5px;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<body>
<form id="myform">
Select a value from the list:
<select id="dropdown_change">
<option value="name1">name1</option>
<option value="nothing" id="open-popup">nothing</option>
<option value="name2">name2</option>
<option value="name3">name3</option>
<option value="name4">name4</option>
</select>
</form>
<div id="popup"> POP UP</div>
</body>
Related
$('#seltags').change(function() {
var obj = $('#' + $(this).val());
$('.txtags').hide();
obj.show();
});
.seltags {
display: block;
padding: 1px 7px;
width: 100%;
}
.txtags {
display: block;
width: 100%;
padding: 5px 9px;
outline: none;
border: 1px solid #999;
border-radius: 9px;
resize: none;
overflow-y: scroll;
margin-top: 13px;
text-transform: uppercase;
}
.tagsimg {
display: none;
}
.divbottom {
height: 14px;
background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='seltags' id='seltags'>
<option value='tagsart'>TAGS ARTICLES</option>
<option value='tagsimg'>TAGS IMAGES</option>
</select>
<textarea class='txtags' id='tagsart' rows="5"></textarea>
<textarea class='txtags tagsimg' id='tagsimg' rows="5"></textarea>
<div class='divbottom'></div>
divbottom gets a top margin (about five pixels) when seltags is changed to second option, and lose that margin when it is returned to the first option.
Can anyone help me what's wrong here?
Thank you.
The margin appears because when the select box is changed and the second option is chosen, the text area that was hidden now gets display: inline-block; to show it, and the offset from being hidden causes the margin jump.
Try adding vertical-align: middle; to the styles of the .txtags class element.
$('#seltags').change(function() {
var obj = $('#' + $(this).val());
$('.txtags').hide();
obj.show();
});
.seltags {
display: inline-block;
padding: 1px 7px;
width: 100%;
}
.txtags {
display: inline-block;
width: 100%;
padding: 5px 9px;
outline: none;
border: 1px solid #999;
border-radius: 9px;
resize: none;
overflow-y: scroll;
margin-top: 13px;
text-transform: uppercase;
vertical-align: middle;
}
.tagsimg {
display: none;
}
.divbottom {
height: 14px;
background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='seltags' id='seltags'>
<option value='tagsart'>TAGS ARTICLES</option>
<option value='tagsimg'>TAGS IMAGES</option>
</select>
<textarea class='txtags' id='tagsart' rows="5"></textarea>
<textarea class='txtags tagsimg' id='tagsimg' rows="5"></textarea>
<div class='divbottom'></div>
The margin appears because when the second option is chosen, the #tagsimg element gets display: inline-block inline style.
In order to remove this margin, you need to add vertical-align: middle to the styles of the #tagsimg element or find out why the display: inline-block is added and change that.
You can read why jQuery does it, and how to avoid it in this StackOverflow question: jQuery .show() adds style="display:inline-block" to elements
it's not a margin, it's the textarea ( .txtags ) that you show and hide that pushes it down a bit necause when shown it gets display:inline-block ,
add .obj.show().css({'display': 'block'}); so both textareas behave the same
$('#seltags').change(function(){
var obj = $('#' + $(this).val());
$('.txtags').hide();
obj.show().css({'display': 'block'});
});
.seltags{
display:block;
padding:1px 7px;
width:100%;
}
.txtags{
display:block;
width:100%;
padding:5px 9px;
outline:none;
border:1px solid #999;
border-radius:9px;
resize:none;
overflow-y:scroll;
margin-top:13px;
text-transform:uppercase;
}
.tagsimg{
display:none;
}
.divbottom{
height:14px;
background:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='seltags' id='seltags'>
<option value='tagsart'>TAGS ARTICLES</option>
<option value='tagsimg'>TAGS IMAGES</option>
</select>
<textarea class='txtags' id='tagsart' rows="5"></textarea>
<textarea class='txtags tagsimg' id='tagsimg' rows="5"></textarea>
<div class='divbottom'></div>
I'm not sure why, but the div.divbottom is not getting any margin or padding at all. The problem is that when you show the .tagsimg it is getting display: inline-block instead of just block which is the initial state of .txtags. Making .tagsimg be hidden by jQuery instead of starting with display:none makes jQuery change it to display:inline-block when shown which fix it.
$('#seltags').change(function(){
var obj = $('#' + $(this).val());
$('.txtags').hide();
obj.show();
});
$('.tagsimg').hide();
.seltags{
display:block;
padding:1px 7px;
width:100%;
}
.txtags{
display:block;
width:100%;
padding:5px 9px;
outline:none;
border:1px solid #999;
border-radius:9px;
resize:none;
overflow-y:scroll;
margin-top:13px;
text-transform:uppercase;
}
.tagsimg{
display:block;
}
.divbottom{
height:14px;
background:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='seltags' id='seltags'>
<option value='tagsart'>TAGS ARTICLES</option>
<option value='tagsimg'>TAGS IMAGES</option>
</select>
<textarea class='txtags' id='tagsart' rows="5"></textarea>
<textarea class='txtags tagsimg' id='tagsimg' rows="5"></textarea>
<div class='divbottom'></div>
both textareas should be either inline-block or block its the mixture of two which is causing the behavior
Your 1st textarea is displayed as a block.
But the trick here is that when you make your 2nd textarea appear, it appears as an inline-block.
I suggest you to use inline-block or delete the property.
Here is a working snippet with some other comments:
// Optimized function
$('#seltags').change(function() {
$('.txtags').hide();
$('#' + $(this).val()).show();
});
.seltags {
display: block;
padding: 1px 7px;
width: 100%;
}
.txtags {
/* display: inline-block; /* Here is what I changed! */
width: 100%;
padding: 5px 9px;
outline: none;
border: 1px solid #999;
border-radius: 9px;
resize: none;
overflow-y: scroll;
margin-top: 13px;
text-transform: uppercase;
}
.hidden { /* Changed name */
display: none;
}
.divbottom {
height: 14px;
background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='seltags' id='seltags'>
<option value='tagsart'>TAGS ARTICLES</option>
<option value='tagsimg'>TAGS IMAGES</option>
</select>
<textarea class='txtags' id='tagsart' rows="5"></textarea>
<textarea class='txtags hidden' id='tagsimg' rows="5"></textarea>
<div class='divbottom'></div>
On a side note, I don't understand why your 2nd textarea appear as inline-block.
Here is an extract of show() documentation:
“The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css( "display", "block" ), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.”
(link: http://api.jquery.com/show/)
I am new to CSS and java script coding.
I have created a webpage that displays hotels according to the place selected in dropdown list.
I have a preference section in my web page that has a number of checkbox preferences.
I want it to work as when a user selects a place from the dropdown list then he must select any checkbox preference that he wants and then the new webpage should get displayed.
In my code the input (place selected) in the dropdown list is not connected to the preferences.
How can I achieve this implementation?
Below is my html code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript">
function is_checked()
{
var Pool= document.getElementById('Pool').checked;
var Gym= document.getElementById('Gym').checked;
var Beach= document.getElementById('Beach').checked;
if(Pool==false && Gym==false && Beach==false)
{
alert('Please check a category')
return false;
}
else if(Pool==true)
{
alert(http://http://localhost/reviews/codeReviews.php)
return true;
}
}
function formaction(checkbox)
{
document.getElementById("myForm").action = checkbox.value;;
}
</script>
</head>
<body background="Tring.jpg">
<div class="wrapper">
<div class="heading">
<h1>Hi</h1>
</div>
<ul class="navigation">
<li>HOME</li>
<li>LOGIN</li>
<li>SIGN UP</li>
</ul>
<div id="container">
<div id="banner">
<img src="mtp.png">
<font color="#00e6ac"</font>
</div>
</div>
<div id="content">
<div id="stay"
<h1>STAY</h1>
<select onchange="location = this.options[this.selectedIndex].value;">
<option>Select a place</option>
<option value="http://localhost/dubai/codeDubai.php">Dubai (UAE)</option>
<option value="http://localhost/canberra/Code.php">CANBERRA (AUS)</option>
<option value="http://localhost/newyork/Code.php">NEWYORK (NEW)</option>
</select>
<br>
<p2>Preferences</p2>
<form action="demo_form.asp" method="get" onsubmit="return is_checked()">
<input type="checkbox" name="hotel" value="Pool" id="pool"> Pool <br>
<input type="checkbox" name="hotel" value="Gym" checked="checked"> Gym <br>
<input type="checkbox" name="hotel" value="Beach" id="Beach"> Beach <br>
<input type="submit" value="Submit">
</div>
</body>
</html>
My css code is:
body{
padding:0;
margin:0;
background-image: url("Tring.jpg");
background-repeat: no-repeat;
}
wrapper{
width:600px;
background:#eee;
margin: 0 auto 0 auto;
}
.navigation{
float:right;
position:relative;
top:-150px;
}
li{
list-style:none;
float:left;
margin-right:50px;
font-size: 14;
font-family: serif;
color:white;
}
.heading{
height:100px;
background:lightblue;
padding:20px;
}
.navigation a{
color:white;
text-decoration: none;
font-size: 14px;
font-family: serif;
}
.navigation a:hover{
color:black;
}
.container{
width:1000px;
height:400px;
}
.banner{
background: url(mtp.png);
background-size: cover;
width: 1000px;
height:400px;
position: fixed;
float:center;
top:300px;
}
.content{
}
.stay{
min-height: 500px;
background: rgba(33, 33, 33, .9);
width: 300px;
float: left;
position: relative;
}
.dine{
min-height: 500px;
background: rgba(33, 33, 33, .9);
width: 300px;
float: left;
position: relative;
}
.shop{
min-height: 500px;
background: rgba(33, 33, 33, .9);
width: 300px;
float: left;
position: relative;
}
.attract{
min-height: 500px;
background:#ddd;
width: 300px;
float: left;
position: relative;
}
.sidebar{
width: 300px;
float:right;
background:#ddd;
min-height: 400px;
}
.footer{
clear:both;
background:black;
height:20px;
color:white;
text-align:center;
padding:10px;
}
I see two problems but I'm not sure whether either of them will get your form to work correctly.
function formaction(checkbox)
{
document.getElementById("myForm").action = checkbox.value;;
}
The formaction function needs a corresponding div with the id "myForm" in your HTML order to work.
<div id="content">
<div id="stay"
<h1>STAY</h1>
The id="stay" div needs to be closed.
I have a text area within a simple website, where a user can type in what they like. I would like to add a selector(Dropdown box/Combobox) to change the color of all of the text within said text area.
full code
function Text() {
if(document.getElementById("textarea").style.fontWeight != 'bold')
document.getElementById("textarea").style.fontWeight = 'bold';
else
document.getElementById("textarea").style.fontWeight = 'normal';
}
function Text() {
if(document.getElementById("textarea").style.fontStyle != 'italic')
document.getElementById("textarea").style.fontStyle = 'italic';
else
document.getElementById("textarea").style.fontStyle = 'normal';
}
function Text() {
if(document.getElementById("textarea").style.textDecoration != 'underline')
document.getElementById("textarea").style.textDecoration = 'underline';
else
document.getElementById("textarea").style.textDecoration = 'none';
}
document.getElementById('colorChanger').addEventListener('change', changeColor);
function changeColor() {
var color = document.getElementById('colorChanger').value;
var list = document.getElementById('textarea');
list.style.color=color;
}
body {
padding: 0px;
margin: auto;
display: block;
width: 10px;
height: 7px;
position: center;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 112px;
color: #C0C0C0;
text-align: center;
}
textarea {
width: 90%;
height: 450px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid;
background-color:;
font-size: 16px;
resize: none;
}
#Button {
position: relative;
top: 450px;
left: 50px;
}
#Button {
position: relative;
top: 450px;
left: 70px;
}
#Button {
position: relative;
top: 450px;
left: 90px;
}
select {
position: relative;
top: -302px;
left: 320px;
}
<!doctype html>
<html>
<head>
<title>Simple Word Processor</title>
</head>
<body>
<button id="Button" type="button" onclick="boldText()">Bold</button>
<button id="Button" type="button" onclick="italicText()">Italic</button>
<button id="Button" type="button" onclick="underlineText()">Underline</button>
<form id="form">
<textarea id="textarea">Enter text here...</textarea>
</form>
<select id="colorChanger">
<option value="#000">Black</option>
<option value="#f00">Red</option>
<option value="#00f">Blue</option>
<option value="#0f0">Green</option>
</select>
</body>
</html>
Just set style.color like below.
var list = document.getElementById('textarea');
list.style.color = color;
document.getElementById('colorChanger').addEventListener('change', changeColor);
function changeColor() {
var color = document.getElementById('colorChanger').value;
var list = document.getElementById('textarea');
list.style.color = color;
}
<textarea id="textarea">Enter text here...</textarea>
<select id="colorChanger">
<option value="black">black</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
</select>
getElementById will not return an array
document.getElementById('colorChanger').addEventListener('change', changeColor);
function changeColor() {
var color = document.getElementById('colorChanger').value;
var list = document.getElementById('textarea1');
list.style.color=color;
}
<textarea id="textarea1">Enter text here...</textarea>
<select id="colorChanger">
<option value="#000">black</option>
<option value="#f00">Red</option>
<option value="#00f">Blue</option>
<option value="#0f0">Green</option>
</select>
Created a fiidle for you here.
Using traditional javascript:
<script type="text/javascript">
function abc(val){
document.getElementById("textarea").style.color=val;
}
</script>
<textarea id="textarea">Enter text here...</textarea>
<select id="colorChanger" onmousedown="this.value='';" onchange="abc(this.value)">
<option value="black">black</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
</select>
Updatee:
In yopu code add:
<script>
function changeColor() {
var color = document.getElementById('colorChanger').value;
document.getElementById("textarea").style.color=color;
}</script>
in the header after style tag.
also you not calling function onchange of select tag. add this in select tag.
<select id="colorChanger" onchange="changeColor()">
You combined my previous code with a comment in your question you changed my getElementById to getElementByTagName and it should be getElementsByTagName you missed the s and it will return an array whereas getElementById will return an object
function boldText() {
if(document.getElementById("textarea").style.fontWeight != 'bold')
document.getElementById("textarea").style.fontWeight = 'bold';
else
document.getElementById("textarea").style.fontWeight = 'normal';
}
function italicText() {
if(document.getElementById("textarea").style.fontStyle != 'italic')
document.getElementById("textarea").style.fontStyle = 'italic';
else
document.getElementById("textarea").style.fontStyle = 'normal';
}
function underlineText() {
if(document.getElementById("textarea").style.textDecoration != 'underline')
document.getElementById("textarea").style.textDecoration = 'underline';
else
document.getElementById("textarea").style.textDecoration = 'none';
}
document.getElementById('colorChanger').addEventListener('change', changeColor);
function changeColor() {
var color = document.getElementById('colorChanger').value;
var list = document.getElementById('textarea');
list.style.color=color;
}
body {
border: 3px solid #C0C0C0 ;
padding: 0px;
margin: auto;
display: block;
width: 1000px;
height: 700px;
position: center;
outline-style: solid;
outline-color: #f8f8f8;
outline-width: 10000px;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 112px;
color: #C0C0C0;
position: relative;
top: -220px;
text-align: center;
}
textarea {
width: 90%;
height: 450px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #C0C0C0;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
position: relative;
top: -305px;
left: 50px;
}
#boldButton {
position: relative;
top: 450px;
left: 50px;
}
#italicButton {
position: relative;
top: 450px;
left: 70px;
}
#underlineButton {
position: relative;
top: 450px;
left: 90px;
}
select {
position: relative;
top: -302px;
left: 320px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Word Processor</title>
</head>
<body>
<button id="boldButton" type="button" onclick="boldText()">Bold</button>
<button id="italicButton" type="button" onclick="italicText()">Italic</button>
<button id="underlineButton" type="button" onclick="underlineText()">Underline</button>
<canvas></canvas>
<h1> Word Processor </h1>
<form id="form">
<textarea id="textarea">Enter text here...</textarea>
</form>
<select id="colorChanger">
<option value="#000">Black</option>
<option value="#f00">Red</option>
<option value="#00f">Blue</option>
<option value="#0f0">Green</option>
</select>
</body>
</html>
I have a styled-select dropdown menu, and I created it's own .css and .js.
This is what happens when I use only one dropdown menu in a page, which works fine as expected:
jsFiddle OK
Instead when I use two dropdown menu it's a mess, and it's normal, because my .js file will do it's functions to all those dropdown menu which exists on the page. This is how it appears when I use two dropdown menu with the same .js and .css files:
jsFiddle NOT OK
Now my questions is how can I use the same .js and .css files for multiple dropdown's which all of them act as expected?
$(function () {
$('.styled-select select').hide();
$("select#elem").val('2');
$('.styled-select div').html($('.styled-select select option:selected').text());
$('.styled-select div').click(function () {
$('.styled-select select').show();
$('.styled-select select').attr('size', 5);
$('.styled-select select').focus();
});
$('.styled-select select').click(function () {
$('.styled-select div').html($('.styled-select select option:selected').text());
$('.styled-select select').hide();
});
$('.styled-select select').focusout(function () {
$('.styled-select select').hide();
});
});
.styled-select select {
position: absolute;
background: transparent;
width: 420px;
padding-top: 5px;
font-size: 18px;
font-family: 'PT Sans', sans-serif;
color: black;
border: 0;
border-radius: 4;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
z-index: 1;
outline: none;
left: -7px;
}
.styled-select {
background: url('../img/campaignSelector.png') no-repeat right;
background-color: white;
width: 420px;
height: 42px;
position: relative;
margin: 0 auto;
box-shadow: 0 2px 2px 0 #C2C2C2;
background-position: 97% 50%;
}
.styled-select option {
font-size: 18px;
background-color: white;
margin-left: 3px;
}
::-webkit-scrollbar {
display: none;
}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div style="width:800px; height: 600px; background: grey;">
<div class="styled-select" style="left:-250px; top:90px; width:200px;">
<div style="font-size:18px; height:42px; position:relative; top:10px; left: 4px;"></div>
<select id="" name="" style="margin:0 0 0 5px; border: none;" onblur="this.size=0; width:200px;" onchange="this.size=0;">
<option value="0">Marco P</option>
<option value="1">Marco F</option>
<option value="2">Daniele</option>
<option value="3">Cristina</option>
<option value="4">Angine</option>
</select>
</div>
<div class="styled-select" style=" width:200px; left:50px; top:48px;">
<div style="font-size:18px; height:42px; position:relative; top:10px; left: 4px;"></div>
<select id="" name="" style="margin:0 0 0 5px; border: none;" onblur="this.size=0; width:200px;" onchange="this.size=0;">
<option value="0">ReshaD</option>
<option value="1">Rasheed</option>
<option value="2">Reza</option>
<option value="3">Davin</option>
<option value="4">Ariya</option>
</select>
</div>
</div>
To make your code work for multiple instances of the .styled-select container you need to use $(this) to reference the element which is raising the event and then use closest() to get the nearest parent .style-select. From there you can use find() to get the required element. Try this:
$('.styled-select select').hide();
$("select#elem").val('2');
$('.styled-select div').each(function() {
var $container = $(this).closest('.styled-select');
$(this).html($container.find('select option:selected').text());
});
$('.styled-select div').click(function() {
var $container = $(this).closest('.styled-select');
$container.find('select').show().attr('size', 5).focus();
});
$('.styled-select select').click(function() {
var $container = $(this).closest('.styled-select');
var text = $container.find('select option:selected').text();
$container.find('div').html(text);
$container.find('select').hide();
});
$('.styled-select select').focusout(function() {
var $container = $(this).closest('.styled-select');
$container.find('select').hide();
});
Updated fiddle
I have a text input. I put a label with a red star to highlight that that input is required in the form submission.
What I did is
<html>
<head>
</script>
<style type="text/css">
input[required] + label {
color: #999;
font-family: Arial;
font-size: 17px;
position: relative;
/*left: -230px; the negative of the input width */
}
input[required] + label:after {
content:'*';
color: red;
}
/* show the placeholder when input has no content (no content = invalid) */
input[required]:invalid + label {
display: inline-block;
}
/* hide the placeholder when input has some text typed in */
input[required]:valid + label{
display: none;
}
</style>
</head>
<body>
<form name="registerForm" action="submit_page.php" method="post">
<div class="form_box">
<div class="input_box ">
<input maxlength="60" type="text" name="name" id="name" required="required" />
<label for="name">Name</label>
<div id="name-error" class="error-box"></div>
</div>
<div class="clear"></div>
</div>
</form>
</div>
</body>
It works for the text input.
I did the same thing for <select <select/>.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
#header { background-color:green; color:white; text-align:center; padding:5px;}
#background {background: url(register_background.png);}
body {
background-color: #cccccc;
}
.star { color: red;}
.button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;}
.button2:hover { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}
select[required] + label {
color: #999;
font-family: Arial;
font-size: 17px;
position: relative;
/*left: -230px; the negative of the input width */
}
select[required] + label:after {
content:'*';
color: red;
}
/* show the placeholder when input has no content (no content = invalid) */
select[required]:invalid + label {
display: inline-block;
}
/* hide the placeholder when input has some text typed in */
select[required]:valid + label{
display: none;
}
</style>
</head>
<body>
<div id="header">
<h1>Please add your property to advertise</h1>
</div>
<div id="background">
<form name="advertiseForm" method="post">
<br /><br />
<select name="divs_states">
<option value="divsORstates" >Divisions or States</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
required="required"
<select/>
<label for="divs_states">Please select a region</label>
<div id="divs_states-error" class="error-box"></div>
</form>
</div>
</body>
</html>
But I don't see a red star. Then when I make a selection, the text doesn't disappear.
What should be is if the selection is Divisions or States, the label Please select a region together with a red star should appear. In case, I select saab, fiat, audi, the text should disappear.
How can I do that?
Thanks
EDIT:
<select name="divs_states" required="required"/>
<option value="divsORstates" >Divisions or States</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
<select/>
<label for="divs_states">Please select a region</label>
<div id="divs_states-error" class="error-box"></div>
The reason for your problem is that you're using the same selector from your input label for your select label.
You have this on both:
input[required] + label:after {
content:'*';
color: red;
}
But in your select form the HTML is different. It needs to be this instead:
select[name] + label:after {
content:'*';
color: red;
}
A little too much cut and paste, perhaps? ;-)
Also note that your closing </select> tag is incorrect, and you have required="required" misplaced in the element (ah, there it is). It should be in the opening <select> tag. In fact, consider running your code through the W3C HTML Validation Service to check for errors.