zoukankan      html  css  js  c++  java
  • CSS实例:横线样式的输入框

    在网上我们常常看见一些注册表单的输入框部分并不是我们常见的矩形框,而是一条细线,很多朋友对此很感兴趣。其实要实现这样的效果并不困难,我们只要用一段简短的CSS代码控制好表单输入框的样式即可。

       示例如下:

       请输入您的用户名:




      下面我们就来看看这段实现效果的css代码。它主要运用了表格边框的样式控制,将左、上、右边框设置为none,只剩下下边框即可。


      



      样式表中代码解释如下:

      “BORDER-LEFT-STYLE:none”: 隐藏左边框
      “BORDER-RIGHT-STYLE: none”: 隐藏右边框
      “BORDER-TOP-STYLE: none”: 隐藏上边框
      “BORDER-bottom-STYLE: none”: 隐藏下边框。


      下面让我们一起来看一个应用实例:        横线式输入框   

      

           隐藏的边框的输入框:   

    用户名:      

        
      实现效果简洁清爽。 

  • 相关阅读:
    前端开发经验总结
    开发组件的原则
    jQuery deferred对象API详解
    prototype、constructor那点事儿
    text-overflow:ellipsis的那点事儿
    9 个超实用的 jQuery 代码片段
    BFC
    Console命令详解,让调试js代码变得更简单
    前端css规范
    什么是FOUC?如何避免FOUC?
  • 原文地址:https://www.cnblogs.com/activities/p/2975463.html
Copyright © 2011-2022 走看看