首页 - 文章 - (X)HTML/CSS - (X)HTML/CSS小技巧

让你的文本框（input）更加丰富多彩！

作者: CodeBit     来源: CodeBit.cn     时间: 2007-05-01 10:09:58
摘要: 经常看到一些网站的文本框有一些很不错的效果，比如搜索关键词文本框里面有一个象征搜索的小图片，或者是文本框边框非常柔和。其实，这些效果制作都非常简单，看过本文，相信你也可以实现丰富多彩的文本框效果。
归类: (X)HTML/CSS,

关键词: input, 文本框, background, image, 效果,


经常看到一些网站的文本框有一些很不错的效果，比如搜索关键词文本框里面有一个象征搜索的小图片，或者是文本框边框非常柔和。其实，这些效果制作都非常简单，看过本文，相信你也可以实现丰富多彩的文本框效果。


--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------


为你的文本框加一个说明用途的小图标


CSS:
  1.  
  2. <style type="text/css"> 
  3.  
  4. input.txtInput { 
  5.     background: #fff; 
  6.     background-repeat: no-repeat; 
  7.     background-position: 2px center; 
  8.     border:1px solid #999; 
  9.     padding:2px 2px 2px 20px; 
  10. } 
  11. input.searchInput {background-image: url(search.gif);} 
  12. input.commentInput {background-image: url(comments.gif);} 
  13.  
  14. </style> 
  15.  


上面的代码中 input.txtInput 定义了文本框中有小图标的通用样式，其中 padding 的第四个值是定义文字内容从 20 象素处开始，原因是本文的图片是 16 象素大小，文字四周有 2 象素的边距。具体到实际应用，需要根据你的图片大小决定。

然后，我们又定义了 searchInput  和 commentInput  两个文本框样式，分别设置了2个不同的小图标。这样，我们在设置文本框的 class 时可以这样写：

HTML:
  1.  
  2. <p> 
  3. <label for="keyword">搜索：</label>  
  4. <input type="text" name="keyword" id="keyword" class="txtInput searchInput" /> 
  5. </p> 
  6.  
  7. <p> 
  8. <label for="comment">评论：</label>  
  9. <input type="text" name="comment" id="comment" class="txtInput commentInput" /> 
  10. </p> 
  11.  



为你的文本框加一个效果柔和的边框


CSS:
  1.  
  2. <style type="text/css"> 
  3.  
  4. input.borderInput { 
  5.     background-image: url(border.gif);; 
  6.     background-repeat: no-repeat; 
  7.     background-position: left top; 
  8.     border:1px solid #d5dee9; 
  9.     padding:3px; 
  10. } 
  11.  
  12. </style> 
  13.  


上面的代码设置了一个背景图，并且左上对齐，当然，我们这个图片通常要宽一些、高一些，然后设置一个和渐变颜色近似的 border 。是的，一个效果柔和的边框实现了。



相关文章
发表评论 有想法？点此发表评论？
推荐链接：(联系 QQ ：326801485)