設定input type為text的文字框樣式
阿新 • • 發佈:2019-01-07
CSS 設定 input type="text" 標籤的樣式,而不會影響到 type="checkbox" 或其它input
第一種解決辦法:使用 JS 迴圈控制每個 type="text" 的文字框
<head runat="server"> <title>無標題頁</title> <style type="text/css"> .myinput { border: red 1px solid; font-size: 12px; color:#000000; } </style> <script type="text/javascript" language="javascript" defer> var u=document.getElementsByTagName("input"); for(var i=0;i<u.length;i++){ if(u[i].type=="text") u[i].className="myinput"; } </script> </head> <body> <form id="form1" runat="server"> <input type="password" /> <input type="text" name="username"/><br> <input type="checkbox" name="senior" value="全站"/> </form> </body>
如果還需要設定 password 的樣式,可以修改 if(u[i].type=="text") 為 if(u[i].type=="text" || u[i].type=="password") 這種用JS控制的方法比較複雜,實現程式碼也比較多。
第二種方法:
<style> input { border: expression(this.type=="text"?"1px solid #04576f":""); } </style> <form> <input type="text" name="username"/> <br> <input type="checkbox" name="senior" value="全站"/> </form>
註明:如果放在aspx頁面中的話,必須去掉<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
expression才起作用了