zoukankan      html  css  js  c++  java
  • 如何去除表单元素获得焦点时的外边框:outline (轮廓)

          我们在做制作表单页面时,经常会需要消除表单元素带来的边框,这时候我们需要用到两个属性:

       1、表单元素未激活状态下的边框,不实现边框: border:none;

             2、表单元素获得焦点时的轮廓,隐藏轮廓: outline:medium;

      具体代码如下:

                .form_row input[type=text],
                .form_row input[type=password] {
                    width: 520px;
                    height: 40px;
                    margin: 0px auto;
                    margin-left: 5px;
                    display: block;
                    border: none;
                    color: #999999;
                    font-size: 14px;
                    border-radius: 5px;
                    background-color: #eff0f4;
                    text-indent: 45px;
                }
                .form_row input:focus {
                    background-color: white;
                    box-shadow: 0 0 15px #ece9e9;
                    border: none;
                    outline: medium;
                }

    效果如下:
      

      


    PS:

     这里有一点需要注意的是,经量不要使用border:0;和outline:0;
    对比0与none;之间的区别在于有渲染和没渲染,感觉他们和display:none;与visibility:hidden;的关系类似
  • 相关阅读:
    MVC 路由规则
    MVC系统过滤器、自定义过滤器
    MVC部署
    MVC 读书笔记
    C# 调用 Web Service
    RESTful 架构
    WebSocket C# Demo
    C# 编写服务 Windows service
    C# 调用FFmpeg 根据图片合成视频
    Socket 编程示例(二)
  • 原文地址:https://www.cnblogs.com/u-drive/p/7887870.html
Copyright © 2011-2022 走看看