css修改输入框背景图标和清除placehol'de'r

原创于 2019-01-31 17:56:29 发布 · 417 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

菜鸟专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何使用CSS自定义HTML中的搜索框样式，包括边框、背景、透明度及焦点状态的效果。通过具体代码实例展示如何实现这些样式，并探讨不同浏览器的兼容性问题。

学习记录

css样式

    input[type=search]{
        border:1px solid #ccc;   /* 输入框边框 */
        background:url("1.png") no-repeat left white ;   /*背景 */
        background-size: auto 100%;        /*适应输入框*/
        height: 30px;
        text-align: center;
        opacity: 0.7;
    } 
    input[type=search]:focus{    /* 输入框focus事件*/
        background:#eee ;
        opacity: 1;   
    }

HTML

 <label for="search">搜索：</label> 
    <input type="search" id="search" size="50px" placeholder="请输入" 
    onfocus="this.placeholder=''" onblur="this.placeholder='请输入' " >
    /* onfocus 和onblur*/