設定input type為text的文字框樣式

selfxd發表於2008-06-19

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才起作用了

相關文章