zoukankan      html  css  js  c++  java
  • 使用rgba设置输入框背景透明

    项目中遇到要求输入框的背景设置透明度,但文字不受影响,如下图

     

    输入框使用input标签

    <input ref="searchText" type="search" placeholder="请输入菜品名称" onInput={this.searchClick} />
    input {
    border: none;
    height: 32px;
    padding-left: 30px;
    border-radius: 17px;
    98%;
    color: #ffffff;
    }
    这样的设置样式只能得到一个白色背景,黑色字体的输入框

    要修改placeholder的字体颜色要使用
    input::-webkit-input-placeholder {
    color: #ffffff;
    }
    input::-moz-placeholder{ /* Mozilla Firefox 19+ */
    color: #ffffff;
    }
    input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
    color: #ffffff;
    }
    input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
    color: #ffffff;
    }

       但背景还是没有实现透明度,接下来使用浏览器的开发者工具,例如google浏览器

       首先给输入框增加一个background-color,然后使用开发者工具获取该元素,调整背景色的透明度,会看到background-color: rgba(0, 0, 0,  .15),如下图

    如果还想增加透明度,还可以加opacity属性

    最后完整的样式

    input {
    border: none;
    height: 32px;
    padding-left: 30px;
    border-radius: 17px;
    98%;
    color: #ffffff;
    background-color: rgba(0,0,0,.15);
    }
    input::-webkit-input-placeholder {
    color: #ffffff;
    }
    input::-moz-placeholder{ /* Mozilla Firefox 19+ */
    color: #ffffff;
    }
    input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
    color: #ffffff;
    }
    input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
    color: #ffffff;
    }
  • 相关阅读:
    leetcode108 Convert Sorted Array to Binary Search Tree
    leetcode98 Validate Binary Search Tree
    leetcode103 Binary Tree Zigzag Level Order Traversal
    leetcode116 Populating Next Right Pointers in Each Node
    Python全栈之路Day15
    Python全栈之路Day11
    集群监控
    Python全栈之路Day10
    自动部署反向代理、web、nfs
    5.Scss的插值
  • 原文地址:https://www.cnblogs.com/wind-wang/p/9443669.html
Copyright © 2011-2022 走看看