zoukankan      html  css  js  c++  java
  • 自定义带图标input样式

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>自定义带图标input样式</title>
            <style>
                .test{
                    width: 400px;
                    height: 400px;
                    border: 3px solid #008000;
                    margin: 0 auto;
                    text-align: center;
                }
                
                .test:before{
                    content: "";
                    display: inline-block;
                    vertical-align: middle;
                    height: 100%;
                }
                
                .input{
                    display: inline-block;
                    vertical-align: middle;
                }
                
                .text{
                    padding: 10px 35px;
                    position: relative;
                    z-index: 20;
                    color: red;
                }
                
                .icon{
                    display: block;
                    position: absolute;
                    padding: 0 0 0 25px;
                    height: 40px;
                    background: url('http://res.ckimg.com/sites/www/v2/images/passport/input_icon.png') no-repeat;
                    z-index: 21;
                }
            </style>
        </head>
        <body>
            
            <div class="test">
                <div class="input">
                    <label class="icon" for="id"></label>
                    <input class="text" id="id"/>
                    <span></span>
                </div>
            </div>
        </body>
    </html>

    输出效果:

  • 相关阅读:
    Java Logging: Log Levels
    Java Logging: Logger Hierarchy
    Java Logging: Logger
    Java Logging: Basic Usage
    Use final liberally
    Writing Final Classes and Methods
    Java Logging: Overview
    base Tag
    DOM Nodes
    Browser environment
  • 原文地址:https://www.cnblogs.com/zouqin/p/5474309.html
Copyright © 2011-2022 走看看