JSFiddle - React, Tailwind, and code Playground
by magizter
HTML
<form id="basketform" name="basketform" method="post" action="">
<input type="text" name="prodcolor" id="prodcolor" value="" />
<p>Color:</p>
<div id="colours">
<span class="White colortrig"><a href="#" title="fehér" onClick="document.basketform.prodcolor.value ='White';"><img src="http://www.rootor.com/images/spacer.gif" alt="White" /></a></span>
<span class="Black colortrig"><a href="#" title="fekete" onClick="document.basketform.prodcolor.value ='Black';"><img src="http://www.rootor.com/images/spacer.gif" alt="Black" /></a></span>
<span class="Grey colortrig"><a href="#" title="szürke" onClick="document.basketform.prodcolor.value ='Grey';"><img src="http://www.rootor.com/images/spacer.gif" alt="Grey" /></a></span>
<span class="Galvanized colortrig"><a href="#" title="horganyzott" onClick="document.basketform.prodcolor.value ='Galvanized';"><img src="http://www.rootor.com/images/spacer.gif" alt="Galvanized" /></a></span>
<span class="Chrome colortrig"><a href="#" title="króm" onClick="document.basketform.prodcolor.value ='Chrome';"><img src="http://www.rootor.com/images/spacer.gif" alt="Chrome" /></a></span>CSS
#basketform #colours span {
width:30px;height:30px;
margin:0 2px 2px 0;
padding:0;
display:inline-block;
border:3px double #bbb;
}
#basketform #colours img {
width:30px;height:30px;
vertical-align: middle;
-webkit-box-shadow: #aaa 0 0 2px;
-moz-box-shadow: #aaa 0 0 2px;
box-shadow: #aaa 0 0 2px;
behavior: url(/css/PIE.htc);
}
#basketform #colours span:hover, #basketform #colours .colorselect {
border:3px groove #22B7FC;
-webkit-box-shadow: #1A8BBF 0 0 2px;
-moz-box-shadow: #1A8BBF 0 0 2px;
box-shadow: #1A8BBF 0 0 2px;
behavior: url(/css/PIE.htc);
}
.AliceBlue { background-color:#F0F8FF} .AntiqueWhite { background-color:#FAEBD7} .Aqua { background-color:#00FFFF} .Aquamarine { background-color:#7FFFD4} .Azure { background-color:#F0FFFF} .Beige { background-color:#F5F5DC} .Bisque { background-color:#FFE4C4} .Black { background-color:#000000} .BlanchedAlmond { background-color:#FFEBCD} .Blue { background-color:#0000FF} .BlueViolet { background-color:#8A2BE2} .Brown { background-color:#A52A2A} .BurlyWood { background-color:#DEB887} .CadetBlue{ background-color:#5F9EA0} .Chartreuse { background-color:#7FFF00} .Chocolate { background-color:#D2691E} .Coral { background-color:#FF7F50} .CornflowerBlue { background-color:#6495ED} .Cornsilk { background-color:#FFF8DC} .Crimson { background-color:#DC143C} .Cyan { background-color:#00FFFF} .DarkBlue { background-color:#00008B} .DarkCyan { background-color:#008B8B} .DarkGoldenRod { background-color:#B8860B} .DarkGrey { background-color:#A9A9A9} .DarkGray { background-color:#A9A9A9} .DarkGreen { background-color:#006400} .DarkKhaki { background-color:#BDB76B} .DarkMagenta { background-color:#8B008B} .DarkOliveGreen { background-color:#556B2F} .Darkorange { background-color:#FF8C00} .DarkOrchid { background-color:#9932CC} .DarkRed { background-color:#8B0000} .DarkSalmon { background-color:#E9967A} .DarkSeaGreen { background-color:#8FBC8F} .DarkSlateBlue { background-color:#483D8B} .DarkSlateGray { background-color:#2F4F4F}...JavaScript
$(document).ready(function(){
$("span.colortrig:first").addClass('colorselect');
$("span.colortrig:first", this).val()
var color_val = $('span.colortrig:first').attr('class');
var st = color_val.split(' ');
var firstClass = st[0];
$("#prodcolor").val(firstClass);
if ($("#prodcolor").val() == "White") {
}
else if ($("#prodcolor").val() == "Black") {
}
else if ($("#prodcolor").val() == "Grey") {
}
else if ($("#prodcolor").val() == "Chrome") {
}
else if ($("#prodcolor").val() == "Galvanized") {
}
else {
}
});
$("span.colortrig").click(function () {
$("span.colortrig").removeClass("colorselect");
$(this).addClass("colorselect");
});