www.baike369.com
百科369 > CSS教程 > CSS只带下划线的输入框

CSS只带下划线的输入框


CSS只带下划线的输入框

在设计考试页面时,经常会碰到填空题,填空题的输入框要求只有一条下划线。


实例

下面是一个只带下划线的输入框的例子。源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS只带下划线的输入框实例-www.baike369.com</title>
</head>
<body>
只有下划线的输入框:
<input type="text" name="text1" size="25" style="border:1px;border-bottom-style:solid;border-top-style:none;border-left-style:none;border-right-style:none;" />
<br /><br />
默认的输入框:<input type="text" id="Text1" size="25" />
</body>
</html>

显示效果如下:

CSS只带下划线的输入框实例

如果要使输入框有边框线,则需要将border样式设置为大于1px的值,然后设置4个边框:

  • 左边框为border-left-style
  • 右边框为border-right-style
  • 上边框为border-top-style
  • 下边框为border-bottom-style
Copyright© 2011-2016 www.baike369.com All Rights Reserved