CSS对文本框的修饰

最新推荐文章于 2023-07-13 22:58:35 发布

a771948524

最新推荐文章于 2023-07-13 22:58:35 发布

阅读量3.1k

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/zxlstudio/article/details/12449409

版权

web 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

CSS对文本框的修饰

这是我们常用的文本框，第一个是普通的样式，第二个是只有背景颜色的文本框，第三个是把文本框的四个边变成黑色的样式，第四个是把上边框、左右边框定义与背景颜色的样式，像一个填空题：）这是怎么实现的呢？下面我将依次介绍。

（1）普通文本框

代码如下：（实际上就是我们常用的）
<input type="text" name="email" size="15" maxlength="255">

（2）仅有背景的文本框

先在head部中加入如下代码：
<head>
<style>

</style>
</head>
然后在你有引用文本框的地方写上：
<input type="text" name="email" size="15" maxlength="255" class=input>
解释程序：在head中的代码中的红色地方，你大约都能看懂:BORDER-BOTTOM --- 文本框边框底边的颜色值，其他的依次是左边、右边、上边的颜色值。在这里将四个边的颜色值都设置成与网页同颜色的，因此当你把文本框的颜色设置成与边框不同的颜色时，就会显示出上面例子中第二个文本框的那中情况。应该注意的是当你想得到这样的效果时，你应注意把class=input写在上面（具体的意思你可以看看前面的内容）

（3）没有阴影的文本框

代码如下：
.input1{ BACKGROUND-COLOR:#ffffff; BORDER-BOTTOM:#000000 1px solid; BORDER-LEFT:#000000 1px solid; BORDER-RIGHT: #000000 1px solid; BOR
DER-TOP: #000000 1px solid; COLOR: rgb(0,0,0); FONT-SIZE: 9pt
}
<input type="text" name="email" size="15" maxlength="255" class=input1>

（4）填空式的文本框

.input2{ BACKGROUND-COLOR:#ffffff; BORDER-BOTTOM:#000000 1px solid; BORDER-LEFT:#ffffff 1px solid; BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP
: #ffffff 1px solid; COLOR: rgb(0,0,0); FONT-SIZE: 9pt
}
<input type="text" name="email" size="15" maxlength="255" class=input2>

（5）透明度的文本框

.input{ border: 0px solid #ffffff;
BACKGROUND-COLOR:#dbe9f5;
COLOR: rgb(0,0,0);
FONT-SIZE: 29pt;
height: 39px;
width: 298px;
Opacity: 0.3;
}

（6）全透明的文本框

.input{ border: 0px solid #ffffff;
BACKGROUND-COLOR:transparent;
COLOR: rgb(0,0,0);
FONT-SIZE: 29pt;
height: 39px;
width: 298px;

}