文本输入框不可编辑或下划线效果

最新推荐文章于 2023-11-02 21:55:49 发布

qingtanlang

最新推荐文章于 2023-11-02 21:55:49 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：网页编程文章标签： input 浏览器 ie url

本文链接：https://blog.youkuaiyun.com/qingtanlang/article/details/2119175

网页编程专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用HTML和CSS创建多种样式的文本框，包括只读、虚线边框、实线边框、无边框及带背景图片等样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文本输入框不可编辑效果，即仍用文本框显示数据但用户一看此文本框就明白是不可编辑的

灰色效果

*注意readonly 只读而disabled 无效，在submit的时候，disabled 不予提交

显示虚线边框的文本框(IE5.5才可看到效果)

<INPUT style="border-width: 1px,1px,1px,1px;border: 1px dashed">
或
<input style="BORDER-BOTTOM: #000000 1px dashed; BORDER-LEFT: #000000 1px dashed; BORDER-RIGHT: #000000 1px dashed; BORDER-TOP: #000000 1px dashed">

边框为实线的文本框

<INPUT style="border-width: 1px,1px,1px,1px;border: 1px solid" VALUE="2001-3-18">

没有边框的的文本框
<INPUT style="border-style: none" VALUE="2001-3-18">

只有下划线的文本框
<INPUT style="border-color: #3333FF #FF3333 #000000 #FF33FF; border-width: 0pt; border-right-width: 0pt; border-bottom-width: 1pt; border-left-width: 0pt" VALUE="2001-3-18">

下划线为虚线的文本框(IE5.5以上浏览器才可看到效果)
<INPUT STYLE="BORDER-BOTTOM: #000000 1px dashed; BORDER-LEFT: 0px; BORDER-RIGHT:0px; BORDER-TOP:0px" VALUE="2001-3-18">

有背景图片的文本框
<INPUT STYLE="background-image: url(图片)" VALUE="2001-3-18">