资讯专栏INFORMATION COLUMN

搜索框设置背景图 通过设置placeholder属性添加

snowLu / 3429人阅读

摘要:名为的框搜索框添加背景图片

/#keyword/
id名为keyword的input框(搜索框)添加背景图片

#keyword::-webkit-input-placeholder {
    color: transparent;
    text-indent: -9999px;
    background: transparent url(../img/google_custom_search_watermark.gif) no-repeat 10% center;
}
#keyword::-moz-placeholder {
    /* Firefox 19+ */
    color: transparent;
    text-indent: -9999px;
    background: #fff url(../img/google_custom_search_watermark.gif) no-repeat 10% center;
}
#keyword:-moz-placeholder {
    /* Firefox 18- */
    color: transparent;
    text-indent: -9999px;
    background: transparent url(../img/google_custom_search_watermark.gif) no-repeat 10% center;
}
#keyword:-ms-input-placeholder {
    /* IE 10- */
    color: transparent;
    text-indent: -9999px;
    background: transparent url(../img/google_custom_search_watermark.gif) no-repeat 10% center;
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/117263.html

相关文章

  • placeholder的兼容处理

    摘要:方法一效果预览思路是,首先判断浏览器是否支持属性,如果不支持的话,就遍历所有输入框,获取属性的值填充进输入框作为提示信息,同时字体设置成灰色。 placeholder是HTML5的属性之一,在不同的浏览器( 支持HTML5的现代浏览器 )中会有略微不同的显示效果: 在Chrome( v31.0.1650.63 m)、Firefox( v21.0 )、360安全( v6.3 极速模式 )...

    beita 评论0 收藏0
  • 网页顶部导航栏加强(分为左右两部分;添加一个不被污染样式的搜索

    摘要:目标中间一段空白把导航栏分为左右两个部分在导航栏上加上一个搜索框,但不被的样式污染。 前置 本文需要对CSS,Vue,ElementUI有基本的了解。 本文以ElementUI提供的导航菜单组件为基础。 本文希望能在此组件基础上实现以下内容: 中间一段空白把导航栏分为左右两个部分 在导航栏上加上一个搜索框,但不被 el-menu-item 的样式污染。 先研究清楚ElementUI...

    yedf 评论0 收藏0

发表评论

0条评论

snowLu

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<