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

最新推荐文章于 2024-04-30 17:59:49 发布

selfxd

最新推荐文章于 2024-04-30 17:59:49 发布

阅读量1.4w

点赞数

分类专栏： CSS 文章标签： input border javascript server html css

本文链接：https://blog.csdn.net/selfxd/article/details/2565908

版权

CSS 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

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

selfxd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
设置input type为text的文本框样式

CSS 设置 input type="text" 标签的样式，而不会影响到 type="checkbox" 或其它input第一种解决办法：使用 JS 循环控制每个 type="text" 的文本框无标题页 .myinput { border: red 1px solid;
复制链接

扫一扫

专栏目录