css - 在选择框中设置单个选项的样式

Question

我需要提供一个选择框，用户可以从中选择不同的 CSS(3) 样式。一个快速而肮脏的测试表明，这可以通过设置选择中的各个选项的样式来完成 - see this fiddle .我所做的只是应用了不同的预定义类，例如

*{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;
}

这有效 - 至少在 Chrome 中是这样，它恰好是现阶段对我来说唯一重要的浏览器。但是，我不确定它是否会继续使用更复杂的 CSS 规则。我应该提到这不适用于下拉选择。

鉴于我只需要它在 Chrome 中工作，这听起来像是一种合理的做事方式吗？如果不是，那就是走“插件”路线的唯一选择。

Answer 1

注意:表单元素，如输入和选择，具有非常有限的样式可能性，因此如果您需要更高级的东西，您需要创建自己的东西。

由于您打算仅针对 WebKit，因此这里有一些样式提示:

	 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>

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