Jump to content

my simple color picker

kanchatchai

By kanchatchai
in CSS

 Share

Recommended Posts

kanchatchai Member

kanchatchai

Posted
Posted (edited)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"><!--#block{width:250px;}#blockPink{ background-color: #EFB4CF; border: 1px solid #BB8EA4;}#blockRed{ background-color: #FCB895; border: 1px solid #C49176;}#blockOrange{ background-color: #FCD192; border: 1px solid #C3A475;}#blockBrown{ background-color: #E2D2C3; border: 1px solid #B1A79C;}#blockYellowOrange{ background-color: #F7E5C1; border: 1px solid #C0B49A;}#blockYellow{ background-color: #FFEEA6; border: 1px solid #C6BB85;}#blockBluegreen{ background-color: #B3E5E1; border: 1px solid #8FB2B2;}#blockGreen{ background-color: #ADE0B9; border: 1px solid #89AD92;}#blockBluegray{ background-color: #ABCECD; border: 1px solid #87A4A5;}#blockVioletBlue{ background-color: #B7CFED; border: 1px solid #92A5BC;}#blockGreenGray{ background-color: #D4EAFC; border: 1px solid #A7B8C5;}#blockBlue{ background-color: #ABE6ED; border: 1px solid #8AB1B9;}#blockLaver{ background-color: #C9C9F7; border: 1px solid #A09FB6;}#blockPurple{ background-color: #D5BEFC; border: 1px solid #A396B0;}#blockGray{ background-color: #DAE1E5; border: 1px solid #ACB2B7;}--> </style><title>Simple Color Picker</title></head> <body> <form id="form1" name="form1" method="GET" action=""> <label>Select Your Color <select name="colorPicker1" id="select"><option id="blockPink" value="blockPink"> blockPink </option><option id="blockRed" value="blockRed"> blockRed </option><option id="blockOrange" value="blockOrange"> blockOrange </option><option id="blockBrown" value="blockBrown"> blockBrown </option><option id="blockYellowOrange" value="blockYellowOrange"> blockYellowOrange </option><option id="blockYellow" value="blockYellow"> blockYellow </option><option id="blockBluegreen" value="blockBluegreen"> blockBluegreen </option><option id="blockGreen" value="blockGreen"> blockGreen </option><option id="blockBluegray" value="blockBluegray"> blockBluegray </option><option id="blockVioletBlue" value="blockVioletBlue"> blockVioletBlue </option><option id="blockGreenGray" value="blockGreenGray"> blockGreenGray </option><option id="blockBlue" value="blockBlue"> blockBlue </option><option id="blockLaver" value="blockLaver"> blockLaver </option><option id="blockPurple" value="blockPurple"> blockPurple </option><option id="blockGray" value="blockGray"> blockGray </option> </select> </label><input type="submit" name="submit" id="button" value="OK" /></form><div id="block"><?PHP if (isset($_GET['colorPicker1'])) echo '<div id="'.$_GET['colorPicker1'].'">Selected Color: '.$_GET['colorPicker1'].'</div>';?></div></body></html>

Edited by kanchatchai
Link to comment
Share on other sites
niche Devoted Member

niche

Posted
Posted

Looks good. Do you see any advantage to making the value in the input match the color selected? If so, can you make that change?

Link to comment
Share on other sites
kanchatchai Member

kanchatchai

Posted
  • Author
Posted (edited)

SOME PHP CODE.<form id="form1" name="form1" method="GET" action=""><label>Select Your Color<select name="colorPicker1" id="select" <?PHP if (isset($_GET['colorPicker1'])) echo ' style="background-color:'.$_GET['colorPicker1'].'"'; ?>><?php$r=0;while ($r <= 15){ $g=0; while ($g <= 15) { $b=0; while ($b <= 15) { $mycolor=dechex($r).dechex($r).dechex($g).dechex($g).dechex($b ).dechex($b ); echo '<option id="blockPink" value="'.$mycolor.'" style="background-color:'.$mycolor.'"'; if ((isset($_GET['colorPicker1']))&&($_GET['colorPicker1']==$mycolor)) echo ' selected="selected"'; echo '>#'.$mycolor.'</option>'; $b = $b+2; } $g = $g+2; } $r = $r+2;}?></select></label><input type="submit" name="submit" id="button" value="OK" /></form>

Edited by kanchatchai
Link to comment
Share on other sites
kanchatchai Member

kanchatchai

Posted
  • Author
Posted

Or Use My Favorites Color. On First Code.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css"><!--#block{width:250px;}#blockPink{background-color: #EFB4CF;border: 1px solid #BB8EA4;}#blockRed{background-color: #FCB895;border: 1px solid #C49176;}#blockOrange{background-color: #FCD192;border: 1px solid #C3A475;}#blockBrown{background-color: #E2D2C3;border: 1px solid #B1A79C;}#blockYellowOrange{background-color: #F7E5C1;border: 1px solid #C0B49A;}#blockYellow{background-color: #FFEEA6;border: 1px solid #C6BB85;}#blockBluegreen{background-color: #B3E5E1;border: 1px solid #8FB2B2;}#blockGreen{background-color: #ADE0B9;border: 1px solid #89AD92;}#blockBluegray{background-color: #ABCECD;border: 1px solid #87A4A5;}#blockVioletBlue{background-color: #B7CFED;border: 1px solid #92A5BC;}#blockGreenGray{background-color: #D4EAFC;border: 1px solid #A7B8C5;}#blockBlue{background-color: #ABE6ED;border: 1px solid #8AB1B9;}#blockLaver{background-color: #C9C9F7;border: 1px solid #A09FB6;}#blockPurple{background-color: #D5BEFC;border: 1px solid #A396B0;}#blockGray{background-color: #DAE1E5;border: 1px solid #ACB2B7;}--></style><title>Simple Color Picker</title></head><body><form id="form1" name="form1" method="GET" action=""><label>Select Your Color<select name="colorPicker1" id="select"><option id="blockPink" value="#EFB4CF"> blockPink </option><option id="blockRed" value="#FCB895"> blockRed </option><option id="blockOrange" value="#FCD192"> blockOrange </option><option id="blockBrown" value="#E2D2C3"> blockBrown </option><option id="blockYellowOrange" value="#F7E5C1"> blockYellowOrange </option><option id="blockYellow" value="#FFEEA6"> blockYellow </option><option id="blockBluegreen" value="#B3E5E1"> blockBluegreen </option><option id="blockGreen" value="#ADE0B9"> blockGreen </option><option id="blockBluegray" value="#ABCECD"> blockBluegray </option><option id="blockVioletBlue" value="#B7CFED"> blockVioletBlue </option><option id="blockGreenGray" value="#D4EAFC"> blockGreenGray </option><option id="blockBlue" value="#ABE6ED"> blockBlue </option><option id="blockLaver" value="#C9C9F7"> blockLaver </option><option id="blockPurple" value="#D5BEFC"> blockPurple </option><option id="blockGray" value="#DAE1E5"> blockGray </option></select></label><input type="submit" name="submit" id="button" value="OK" /></form> <?PHPif (isset($_GET['colorPicker1']))echo 'Selected Color: <input type="text" name="selectedcolor" style="background-color:'.$_GET['colorPicker1'].'" value= "'.$_GET['colorPicker1'].'">';?> </body></html>

Link to comment
Share on other sites
kanchatchai Member

kanchatchai

Posted
  • Author
Posted (edited)

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Color Picker By Kanchatchai</title><script type="text/javascript"><!--function clickedColor(selObj){hex=selObj.options[selObj.selectedIndex].value;selObj.style.backgroundColor=hex;document.getElementById("colortext").value=hex;}//--></script></head><body><form id="form1" name="form1" method="GET" action=""><label>Select Your Color<select name="colorPicker1" id="colorPicker1" onchange="clickedColor(this)"> <?php$hexcolor = array("EFB4CF","FCB895","FCD192","E2D2C3","F7E5C1","FFEEA6","B3E5E1","ADE0B9","ABCECD","B7CFED","D4EAFC","ABE6ED","C9C9F7","D5BEFC","DAE1E5","BB8EA4","C49176","C3A475","B1A79C","C0B49A","C6BB85","8FB2B2","89AD92","87A4A5","92A5BC","A7B8C5","8AB1B9","A09FB6","A396B0","ACB2B7");foreach ($hexcolor as $mycolor){ $mycolor="#".$mycolor; echo '<option id="blockPink" value="'.$mycolor.'" style="background-color:'.$mycolor.'"'; if ((isset($_GET['colorPicker1']))&&($_GET['colorPicker1']==$mycolor)) echo ' selected="selected"'; echo '>'.$mycolor.'</option>'; } ?> </select></label> <input type="text" id="colortext" name="colortext" <?PHP if (isset($_GET['colorPicker1'])) echo 'value="'.$_GET['colorPicker1'].'"'; ?>><input type="submit" name="submit" id="button" value="OK" /></form>

Edited by kanchatchai
Link to comment
Share on other sites
  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...