CODEWITHSUNDEEP
css
DroidOS
DroidOS

Reputation: 8900

Styling individual options in a select box

I need to provide a select box from which users can select different CSS(3) styles. A quick and dirty test suggests that this an be done by styling the individual options in the select - see this fiddle. All I have done there is applied distinct predefined classes such as

*{font-family:arial;}
.red{color:red;font-family:'arial black'}
.blue{color:aqua;}
.green{color:lime;}
#sel
{
 background-color:#2f2f21;
 padding:0.5em;
 border-radius:8px;
 color:white;
}

This works - at least in Chrome which happens to be the only browser that matters to me at this stage. However, I am not sure that it will continue to work with more complex CSS rules. I should mention that this does not work with dropdown selects.

Given that I only need this to work in Chrome does this sound like a reasonable way to do things? If not is the only option that of going down the "plugin" route.

Upvotes: 0

Views: 66

Answers (2)

Asons
Asons

Reputation: 87262

Note: Form elements, like input and select, have very limited styling possibilities so if you need more advanced stuff, you need to create your own.

Since you plan to target WebKit only, here is some style tips:

	 body {background: #e5e5e5; padding: 1em; margin: 0; font-size: 16px;}
	 body * {margin: 0; padding: 0; font-family: "Lucida Grande", helvetica, sans-serif;}
	 p {margin: 0 0 1em; font-size: 14px;}
	 
	 input, textarea, select {
	   border: 1px solid #555;
	   padding: 0.5em;
	   font-size: 15px;
     line-height: 1.2em;
     width: 80%;
     background: #fff;
     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
     -webkit-appearance: none;
 	   -webkit-box-shadow: 1px 1px 1px #fff;
 	   -webkit-border-radius: 0.5em;
	 }
	 
	 input:focus, textarea:focus, select:focus {
	   outline: none;
	   border: 2px solid #058cf5;
	   margin: -1px;
	 }
	 
	 textarea {
     height: 55px;
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #aaa), color-stop(0.05, #fff));
   }
   
   select {
     padding: 0.5em 1em 0.5em 0.75em;
     background: #fff url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%0C%80%00%00%00%40%08%02%00%00%00W%AEz%EF%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%04%E5IDATx%DA%EC%DD%3DN%E3Z%18%06%E0%B1oD%82%A8%E8(%A8%D2Q%D2%D0%40%83%C4%12%D8%01%3Db%09P%81%A0%40%A2%60%05%D9%05%BB%A0%04%09!B%3A%9A%10%07%F2g%E7%22%90f(%98%E09%23Y7%E7%3EOi%1F%1FK_%FD%EA%FD%92%E9t%FA%03%00%00%00%00%00%00%00%00%80%3F%97%1A%01%00%00%00%00%00%00%00%00%40%98%9A%06%2C%00%00%00%00%00%00%00%00%20%0E%D5%A7%A14%60%01%00%00%00%00%00%00%00%00%04%D2%80%05%00%00%00%00%00%00%00%00DB%03%16%00%00%00%00%00%00%00%00%C0%DC%D0%80%05%00%00%00%00%00%00%00%00D%A2(%8A%8A%FF(%80%05%00%00%00%00%00%00%00%00D%C2%0AB%00%00%00%00%00%00%00%00%80%B9%A1%01%0B%00%00%00%00%00%00%00%00%88%84%15%84%00%00%00%00%00%00%00%00%00%81%AC%20%04%00%00%00%00%00%00%00%00%98%1B%1A%B0%00%00%00%00%00%00%00%00%80HXA%08%00%00%00%00%00%00%00%00%10%A8%FA4%94%00%16%00%00%00%00%00%00%00%00%10%09%0DX%00%00%00%00%00%00%00%00%00%81%AAOC%A5%86%0E%00%00%00%00%00%00%00%00%10F%03%16%00%00%00%00%00%00%00%00%10%09%2B%08%01%00%00%00%00%00%00%00%00%02U%9F%86%12%C0%02%00%00%00%00%00%00%00%00%22!%80%05%00%00%00%00%00%00%00%00%10%C8%0AB%00%00%00%00%00%00%00%00%80%40%1A%B0%00%00%00%00%00%00%00%00%00%02i%C0%02%00%00%00%00%00%00%00%00%08%A4%01%0B%00%00%00%00%00%00%00%00%20%90%06%2C%00%00%00%00%00%00%00%00%80%40%02X%00%00%00%00%00%00%00%00%00%81%AC%20%04%00%00%00%00%00%00%00%00%08%24%80%05%00%00%00%00%00%00%00%00%10%C8%0AB%00%00%00%00%00%00%00%00%80%40%1A%B0%00%00%00%00%00%00%00%00%00%02i%C0%02%00%00%00%00%00%00%00%00%084%3B%0Du%7B%7B%7Bzz%3A%18%0C%CA_%D8h4%F6%F6%F6677%F3%3C%FF%F2%40%D2%E9t%CC%1D%00%00%00%00%00%00%00%00%88%40%96e3%DE%26I2%18%0C%8E%8F%8F%EF%EE%EE%CA%DC%B6%BC%BC%7Cxx%D8l6_%5E%5EF%A3%D1%97%E9%AE%D4%D0%01%00%00%00%00%00%00%00%80%FF%83%E9t%BA%B8%B8xvv%B6%B3%B3%F3%ED%E1%F5%F5%F5V%AB%B5%B6%B66%99L~W%7F%F5%26y%7C%7C4Y%00%00%00%00%00%00%00%00%20%02%BD%5E%EF%DB3i%9A%D6%EB%F5%AB%AB%ABV%AB%F5%BBu%84%BB%BB%BB%FB%FB%FB%FD~%3F%CB%B2%B73%B3%02X%EDv%DB%DC%01%00%00%00%00%00%00%00%80%08%94%09%60%FDx%DFE%B8%B0%B0%D0n%B7%2F..%3A%9D%CE%E7W%8DF%E3%E8%E8hcc%23%7B7%1C%0E%BF%DC%3C%F8%EB%AA%87%87%07s%07%00%00%00%00%00%00%00%00%22%F0%FC%FC%5C%F2d%9A%A6%B5Zm2%99%9C%9F%9F___%7F%3C%5C%5D%5D%3D99YYY%E9%F5z%FD~%7F%3C%1E%17E1%FB%9E%7F%0E%0E%0E%CC%1D%00%00%00%00%00%00%00%00%88%C0p8%2Cyr%3A%9D%E6y%9E%A6%E9%F6%F6%F6h4%BA%B9%B9%D9%DA%DA%BA%BC%BC%AC%D5j%DDn7%CB%B2%B7%87%B3%BB%AF%3E%24%F7%F7%F7%E6%0E%00%00%00%00%00%00%00%00D%A0%7C%03%D6Oi%9A%D6%EB%F5n%B7%DBl6%C7%E3q%96e%AF%AF%AF%DF%16_%FDT%2B%93%D2%02%00%00%00%00%00%00%00%00%F8%EF%2B%1F%9C%FA%FC%C9%9B%A5%A5%A5%A7%A7%A7%3C%CF%CB%AC%1D%FCL%00%0B%00%00%00%00%00%00%00%00%88DX%1A*%7F%97%24I%C0%E7%02X%00%00%00%00%00%00%00%00%40%24%FE%26%0D%15%F6%AD%00%16%00%00%00%00%00%00%00%00%10%89%80%15%84%7FI%00%0B%00%00%00%00%00%00%00%00%88D%F5i(%01%2C%00%00%00%00%00%00%00%00%20%12%1A%B0%00%00%00%00%00%00%00%00%00%02i%C0%02%00%00%00%00%00%00%00%00%08%24%80%05%00%00%00%00%00%00%00%00%10%C8%0AB%00%00%00%00%00%00%00%00%80%40%D5%A7%A1RC%07%00%00%00%00%00%00%00%00%08%A3%01%0B%00%00%00%00%00%00%00%00%88%84%15%84%00%00%00%00%00%00%00%00%00%81%AAOC%09%60%01%00%00%00%00%00%00%00%00%91%10%C0%02%00%00%00%00%00%00%00%00%08T%FD%0A%C2%D4%D0%01%00%00%00%00%00%00%00%00%C2h%C0%02%00%00%00%00%00%00%00%00%22a%05!%00%00%00%00%00%00%00%00%40%A0%EA%D3PV%10%02%00%00%00%00%00%00%00%00%04%D2%80%05%00%00%00%00%00%00%00%00D%A2(%8A%8A%FF(%80%05%00%00%00%00%00%00%00%00D%C2%0AB%00%00%00%00%00%00%00%00%80%B9%A1%01%0B%00%00%00%00%00%00%00%00%88%84%06%2C%00%00%00%00%00%00%00%00%80%B9%A1%01%0B%00%00%00%00%00%00%00%00%88DQ%14%15%FF%F1_%01%06%00md%E2%BF%C9%C3%19%DA%00%00%00%00IEND%AEB%60%82") no-repeat right center;
     -webkit-background-size: 1600px 32px;
   }
	 
	 input[type=text] {
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #aaa), color-stop(0.12, #fff));
   }
   
   input[type=submit] {
     width: auto;
     border-radius: 2em;
     padding: 0.25em 1em;
     line-height: 1.5em;
   }
   
   input[type=checkbox],
   input[type=radio] {
     display: inline-block;
     font-size: 15px;
     line-height: 1em;
     margin: 0 0.25em 0 0;
     padding: 0;
     width: 1.25em;
     height: 1.25em;
     -webkit-border-radius: 0.25em;
     vertical-align: text-top;
   }
   
   input[type=radio] {
      -webkit-border-radius: 2em;
    }

   input[type=checkbox]:checked {
     background: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%008%00%00%008%08%02%00%00%00'%E4%ACI%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%04DIDATx%DA%EC%98%B9J%2CA%14%86%EF%F4%AC%8E%5B%24%F8%00%93%BA%83%89%89%A1%22n%A1%81%89%B8%22%82%2B%06%A2%E2%82%B8%20%1A%A9(%B8%BC%87%8F%E0%12%09%3E%82K%AA%20%EAu%EEo%FFw%0EEuO%2F3%A3%5C%2F%FD%07E%F5Lu%F7%D7%FF9u%BA%BA%22%A9T%EA%D7O%90%F1%EB%87(%00%0D%40%03%D0%004%00%0D%40%03%D0%FF%1B4%F2%3D%B7I%A7%D3%B6%BF%87B%A1%7F%05T%105V%22%F2G%2F%B8%91oC%D4%40qH%3E%B4%D2w%CA%D1%D0%D7H%F3%89%94%86aloo%0F%0C%0C%D8%BA%EB%7C%C1H8%1C%FE%22%2F%D3%19%FD%B5%C40677%BB%BB%BB%D1%8F%C5b%7B%7B%7B%B6%8F%975%F4%BE%40%ADs%C2zu%8D%F2%E3%E3%03-%EE%B2%B1%B1AJhjj%0A'%EE%EF%EF%A3%C5%03xa%8D%409%F09g%95%20B%18%06%CA%F5%F5u%A1%A4%26''qk%F8%8A%7FU%DC%AC%A0%D1h%D4c%1C%1D%1C%95%1Bp%00%11y%08%8E%B5%B5%B5%AE%AE.%EB%95%9B%9A%9A%8E%8F%8F1Re%CD%11T%8B%23%95L%26%CB%CA%CA%EE%EE%EE%D4y%23%E5F%CCF%07%9E%AD%AC%ACtvvZ%AF%7Cyy944%04J%8C%01%A8%9A%00%F6%A0%C8kWJ%E6%19%DBD%22%B1%BB%BB%5BYY988x%7F%7FouB%BCD%BB%B4%B4%D4%D1%D1a%BD%F2%C5%C5%C5%F0%F0%F0%EB%EB%2Bl%22(Mu%02upT%9D%10%BC%7D%3C%1E%DF%D9%D9%A9%A9%A9A%FF%F0%F0%10%96%3C%3C%3C%A8%09%A0V%C7%E5%E5%E5%F6%F6v%5BJ%3C%E4%DB%DB%1B))W%D0P%5B%5B%9B%83%9DD%FCm%0A%DEommUWW%CB%18D%1F%C6%3C%3E%3E%8A%A98%0B%23%D1.%2C%2C%B4%B6%B6%3AP%C6LEM1%F4%CE%F3)%A4MF%DB%99%FB%FE%FE%8E_%40YUU%A5%0DSY%25%EE%F3%F3%F3---%0E%94%88%8C%80%D2Q%D7%1C5bn%E2%85%00%7D%7D%7Dm%3D%1F%C9zppPQQA%D7%F1%0B%BC%CCF%89T%C1%18d9%40%13%A6%E2%A6x%23%B5oU%B8%BE%BE%3E%9CEj8%00zuu%05%C3jkk5%82%92%92%92%E6%E6%E6%F3%F3%F3%A7%A7%A7%C5%C5E%5BJ%CC%F1%91%91%11P%0A%A2J%C9%04%90d%B5U%04C%B3%85%9Eqg%9A%F3%F0%EC%EC%0Cm__%9F%D5%D7%A3%A3%A3%DB%DB%5B%10%5B%2F%85'%1C%1D%1De%5DSm%23%9Cj%87S%1D%CDV%9E%98%A3%F0%80%C9%C7%FC%C3%E1%E9%E9)%3A%FD%FD%FDVV%C8%96rll%0C%97*..%8Eg%24%94%5E*%A8%0FP%89%3E%7D%3D99A%07%8B%20%D7w%2F%D2z%7C%7C%9C%94%92%9A%DAd%F7B%F9%09%EA%10zb%81U%EA%9C%FC%05_%D1qf%05%E5%C4%C4%04%93X%CDK%A1t%AD%9D%3E%0A%3EA%ADi%84%16%ACh%AD9%40%DD%DC%DC%90%12yYd%8A%94%B4%D3%2F%A5K%E8%A5%E0%AB%F3%D1%C8%88%AC%A8%FF%8D%8D%8D%DA%B9%CF%CF%CF%B3%B3%B3%18%03%3E%82%D2N%EB%04%F2%FE%D9%94%D5Qu9%C2%9A%2F%AC2%09%A0%E9%E9i%BCT%1B%1A%1AT%CA%9E%9E%9E%97%97%17D%5C%B33gJ%F7%D0%0B%2B%86%91U%2Bu8%9C%99%99%C1%07F%5D%5D%1D)%7B%7B%7B%B1%DA(--M%9AR%83.1%F1K%E9%BEpVYU8%E2%A2%C5%03%80%60nn%0EK%E3T*%85%E9%85%E7%C1%22%B0(%23%A1T%8B%91_JO%9F%22%C2%AA%BD%B1%84%18%10x%7D%AF%AE%AE%82%09%C3%CA%CB%CB%B5%D7%8FV%8Cr%A0%F4%FA%CD%24%AC%E4c%2B%8E%22%D0p%91%8B%26%D4K%B1Y%DE%40%EA%8A37%CAOP%2F%A7%C9BS-Ob*PdE%A2%FEH%E2%82P%FA%D8%80%10Vy%A3%0A%2Bhh'%07%A8%95A%94'%A5%BF%9D%12%8D%95%1D%88%B5V6g%C8*%E5%B6%20%94%BE%B7tlY%85R%C6%C8%87T%3E%B3'%DF%BD'%8D%953L%FD%92%B6%EE%EA%E4O%99%E3%26%99%F6%11%E7%BC%7DR%10%CA%DCw%F3%D4%95%94-J%A1%F8%0A%B6%EDXp%A0%60%0F%3F%00%0D%40%03%D0%00%F4k%F4G%80%01%00%E2%BB%B3%8D%BD%BE%0E%DE%00%00%00%00IEND%AEB%60%82") no-repeat center center;
     -webkit-background-size: 28px 28px;
   }
   
   input[type=radio]:checked {
      background: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%008%00%00%008%08%02%00%00%00'%E4%ACI%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%03%99IDATx%DA%EC%98AKrA%14%86%BBj%A6%9F%11%04R%B9ID%A1%82%16%11n%A4m%8Bh%11%ED%04%D7%FE%8Bh%95%D8%0F%A8e%7F%40%DADT%B4%8FvA%1BA%DA%84%06%ADZ'%95%A9%BD%DF%7D%F10%DF%CDl%E6*%1F%08s%16r%EF8%F7%CEs%DFsf%CE%99q2%99%CC%C48X%60bL%CC%82ZP%0BjA-%A8%05%B5%A0%16%D4%82%9AXh%24o%E9v%BB%03%FEu%1Cg%04%A0%C3%BCE%F8%F0%92%9FX%D5%F7%0F3V(%18%0C%0EC%A9%FE%AA%ED%C2%E4%B8%26-%BEY%FD%80z%10%85%D2s%ED%7C%B3apC0%7F%94b%9DN%07-%CB%CB%CB%F9%7C~cc%23%99L%E2%B6%D1h%DC%DE%DEV*%95%87%87%07%60%05%02%81%BE%C4%FA%E6d%B3YSP%B1v%BB%0D%CAp8%BC%BF%BF%BF%B3%B3%F3%F1%F1%D1j%B5%C8%0D%B2%C9%C9I%FCu~~~pp%80%BF%D0%02%EFyp%0D%40s%B9%9C%0F%CA%8Ek%00%85CNNNVVV%DE%DE%DE%FA%3E%12%89Dj%B5Z%B1X%FC%FC%FC%04h%C05%1F%AC%C1t%3A%1D41%19%86%DC%7B%7B%7Bp%F7%FB%FB%BB%F3%83%E1c%12%89%C4%FC%FC%FC%CD%CDM%C85%BC%24%D43%FDqCp%90%91%9C%14%12%B7%B8XZZ%DA%DD%DD%7D%7D%7D%1D%AC%0D%3E%03%DDNOO%1F%1F%1F%19%00%9E%0F%D6%9ALSSS%FA%A0%A4%C4%18%04-%14%0A%08J%9D%C1%D0%0D%9D%CB%E52%10!%8D%CA%AA%0B%8Ax%D7%EC%CA%B8%E4%DBq%81%98%5B%5B%5Bc%8B%CE%B3%EB%EB%EBxP%FC.%F1%3AbP%99%E6LB%1Cfaa%01%B8%9A%AA%CC%CD%CD%89%DF%85U%DF%FB%06%A0%22'%AE%C1G1%8Cf.%25%04%22%BC%2F%A2%EA%82j%C6(A%A9%1F%A5E%D8%BD%BC%BC%C4%E3%F1%C1%15%89%24Rtf%80%8A%81%D5%00%D4%B7%A2%18%E6%FE%FE~kk%8B%2B%FC%AFZ%A23%3D%CED%F0%3F%40)-F%3A%3B%3B%DB%DE%DE%D6Q%14%0F%A2%B3h%E9%07%D4%C8%F5%8C*%DE%C2%FB%F5z%FD%EA%EA%0A%AC%83E%C5%23%E8%86%CE%D3%D3%D3%11%D70%A81%A8%FE%82%CF%15%94%AE%E7%82%0A%5D%8F%8E%8E%16%17%17WWW%07%D4%A3%D5j%15%DD%041%EC%9A%AC%A6%BA)tssS3s%AA%E9Dd%00%EB%F5%F5%F5%EC%EC%2C%B2%94T%9Fb%E8%7FyyY*%95%20%5E%2C%16%FB%E3%9A%E0%92U3%91%3A%87%87%87F%F9%13d%98%EF%C8%8A%A8B%9A%CD%26%F2g%D3%B5T*%85%18%40-%06%81%D1%FF%E9%E9%E9%EE%EE%EE%E2%E2%02%F5%1E%F9%08%FA%DD%EF%23v%3D%3D%CB0U%8B%20*%8DQ%9F%9F%9F%8F%8F%8F%3De%1E%98fff%A2%D1(%10%A3%AEQKYD%F5Wb%83%C2%99%A2%06%FE5RblH%85%A2%13z%0B(%DBA%16%E9%99Ji%94%96%CC%B6%22%14U%82U(%A9%1C%ABf%96%D2%D2%8D%2B%11qeI%A2%D3M%13%9B%D9%9E%89%8ArA%95%AC%8D%E1%5B%AE%B5%5D%93%CD%1D%3B%A8yH%ADEL%0Bg%E3%ED%B2%3A%A3%05%17%1C%ED%9Ey%40%E5%7B%C4%DD%B2v%9A%81%9ARr%7B%89%C1%04%88%1A%13%11%17j%3Bq%D5%98%F6%BD%B93%3E)%11VUZ%16~%EA%8EY%80%04NMB~%B6%CB%3E%CE%02d%C3D%C1d%E5%EA%7B%00%E1%994%FE%0F%20%7C%9F%B1%A8%B8%7FS%DCo%93r%C8%13%A8a%0F%C9Fr%00f%CFG-%A8%05%B5%A0%16%D4%82%8E%1F%E8%97%00%03%00%2CK3%C0%95%A6%DFv%00%00%00%00IEND%AEB%60%82") no-repeat center center;
      -webkit-background-size: 28px 28px;
    }
<p><input type="text" placeholder="Text input"></p>
<p><input type="text" value="Text input focused" autofocus></p>
<p><textarea placeholder="Textarea"></textarea></p>
<p><label><input type="checkbox" checked> Checkbox</label></p>
<p><label><input type="checkbox"> Checkbox</label></p>
<p><label><input type="radio" checked> Radio</label></p>
<p><label><input type="radio"> Radio</label></p>
<p><select><option>Select&hellip;</option><option>Another</option></select></p>
<p><input type="submit" value="Submit"></p>

Src: https://signalvnoise.com/posts/2609-customizing-web-forms-with-css3-and-webkit

Upvotes: 1

jevannie
jevannie

Reputation: 396

I did personaly prefer this way if your goal is to only use CSS :

select option.aClass {
    /* Your CSS here */
}

With this more refined approach, you are sure that your class will not interact with others element style.

If you are looking for a component a bit more powerfull you can have a look at bootstrap-select.

Upvotes: 0

Related Questions