利用CSS改变输入内容的样式及控件的外形

最新推荐文章于 2022-09-04 16:40:07 发布

symcious

最新推荐文章于 2022-09-04 16:40:07 发布

阅读量1.2k

点赞数

分类专栏： Asp.Net 文章标签： css border class stylesheet input xhtml

Asp.Net 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

通过本样式表，用户可以改变在文本框中所输入内容的大小及字体，并可以改变各种控件的外形,充分满足实际的需求。

CSS文件：

body {
     color : white;
     font-size : 12px;
     font-family : "trebuchet ms",Verdana, Arial, Helvetica, sans-serif;
     line-height : 15px;
     background : 0 3px;
     text-decoration : none;
     background-color : #000000;
      }

.button {
     font-size : 12px;
     font-family : "trebuchet ms",Verdana, Arial, Helvetica, sans-serif;
     line-height : 15px;
     background-color : #e8e8e8;
     background-position : center;
     width : 80px;
     height : 21px;
     border : 1px solid #707070;
      }

.button:focus {
     font-size : 12px;
     font-family : "trebuchet ms",Verdana, Arial, Helvetica, sans-serif;
     line-height : 15px;
     background-color : #ffa8a8;
     background-position : center;
     width : 80px;
     height : 21px;
     border : 1px solid #707070;
      }

.campo {
     font-size : 12px;
     font-family : "trebuchet ms",Verdana, Arial, Helvetica, sans-serif;
     line-height : 15px;
     background-color : #e8e8e8;
     background-position : center;
     border : 1px solid #707070;
     width : 180px;
     height : 100px;
      }

.campo:focus {
     font-size : 12px;
     font-family : "trebuchet ms",Verdana, Arial, Helvetica, sans-serif;
     line-height : 15px;
     background-color : #ffa8a8;
     background-position : center;
     border : 1px solid #707070;
     width : 180px;
     height : 100px;
      }

.combo {
         font-size : 20px;
         font-family : "trebuchet ms",Verdana, Arial, Helvetica, sans-serif;
         line-height : 15px;
         background-color : #ff6347;
         background-position : center;
         width : 180px;
         height : 20px;
         border : 1px solid #ff6347;
      }

.combo:focus {
         font-size : 12px;
         font-family : "trebuchet ms",Verdana, Arial, Helvetica, sans-serif;
         line-height : 15px;
         background-color : #ffa8a8;
         background-position : center;
         width : 180px;
         height : 20px;
         border : 1px solid #707070;
      }
a:focus, a:active {property: value;}

index.html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>
<title>CSS Form field color change... on focus... By Luciano D. Iannicelli</title>
<link rel="stylesheet" href="css_color_change.css" type="text/css" media="screen" />

</head>

<body>
<table width="580" border="0" cellspacing="0" cellpadding="2">
    <tr>
                  <td colspan="3">
                  <hr align="center" noshade="noshade" size="1" color="#C0C0C0" />
                  </td>
    </tr>
    <tr>
     <td width="200" valign="top">
                  Name<br>
     <input class='combo' type="text" name="nom" size="22" /><br>
     Surname<br>
     <input class="combo" type="text" name="ape" size="22" /><br>
     Telephone nr<br>
     <input class="combo" type="text" name="tel" size="22" /><br>
     Email<br>
     <input class="combo" type="text" name="ema" size="22" /><br>
     <td width="180" valign="top" align="left">Comment<br>
     <textarea class="campo" name="con" rows="8" cols="32" wrap="physical"></textarea>
                  <br><div align="right"><input class="button" type="submit" name="submitButtonName" value=" Send " /></div>
                  </td>
     <td width="200" valign="top" align="left">
                  </td>
    </tr>
   </table>
</body>

</html>

symcious

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用CSS改变输入内容的样式及控件的外形

通过本样式表，用户可以改变在文本框中所输入内容的大小及字体，并可以改变各种控件的外形,充分满足实际的需求。 CSS文件：body { color : white; font-size : 12px; font-family : "trebuchet ms",Verdana, Arial, Helvetica, sans-serif; line-height
复制链接

扫一扫

专栏目录