去除input边框

  1. 去除input边框
  2. input去除边框
  3. 去除input框获取焦点时的蓝色外边框

@ sunRainAmazing

**

去除input的边框仅仅用border属性 ,其实是不能满足我们的需求的
此外还需要加上outline属性才可以 实现我们想要的样式
**

去除边框的代码 border-width:0; 即可去除相应的周围的边框
但是实际,并不能达到我们想要的效果,
而appearance:none;也不能达到我们想要的效果。

如下图展示:

去除input边框_第1张图片
边框input3 获取焦点的样式
去除input边框_第2张图片

很明显,有一个淡蓝色的外边框在上面

因此,需要 添加 ,去除input的外边线框,如下

原文连接

outline:none

outline:medium;

源码如下


<html>
    <head>
        <meta charset="UTF-8">
        <title>去除input的边框title>
        <style>
            input{text-indent: 1em;}
            #search1{ }
            #search2{ border-width: 0; }
            #search3{ border:1px solid red; }
            #search4{ outline:medium;}
            /*获取焦点时 外边框显示红色*/
            #search4:focus{ border:1px solid red; }
            #search5:focus{ border:1px solid red; }
            #search5: { appearance: none; }


        style>
    head>
    <body>
        <br/>
        <input type="text" id="search1" name="search" 
            placeholder="请输入搜索内容1" />  

        <input type="text" id="search2" name="search" 
            placeholder="请输入搜索内容2" /> <br/><br/>

        <input type="text" id="search3" name="search" 
            placeholder="请输入搜索内容3" />  

        <input type="text" id="search4" name="search" 
            placeholder="请输入搜索内容4" /> <br/><br/>

            <input type="text" id="search5" name="search" 
            placeholder="请输入搜索内容5" /> <br/><br/>

    body>
html>

你可能感兴趣的:(CSS,需求,input-CSS)