设置input type为text的文本框样式

selfxd

墨衍会员 · AI 创作全网分发码龄20年

关注

原创最新推荐文章于 2023-11-27 17:26:47 发布 1.4w 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

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

收录于

CSS

标签

#input #border #javascript #server #html

本内容遵循 CC 4.0 BY-SA 版权协议

【前端】input表单 type属性详解 input 元素可以用来生成一个供用户输入数据的简单文本框。在默认的情况下，什么样的数据均可以输入。而通过不同的type属性值，可以限制输入的内容。阅读详情

设置input type为text的文本框样式

相关推荐