CSS/HTML: Create a glowing border around an Input Field

后端 未结 11 2362
野的像风
野的像风 2020-12-02 03:39

I want to create some decent inputs for my form, and I would really like to know how TWITTER does their glowing border around their inputs.

Example/Picture of the Tw

11条回答
  •  独厮守ぢ
    2020-12-02 04:14

    Modified version with little less glowing version.

    input {
        /* round the corners */
        //background-color: transparent;
        border: 1px solid;
        height: 20px;
        width: 160px;
        color: #CCC;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;    
    }
    
    input:focus { 
        outline:none;
        border: 1px solid #4195fc; 
        /* create a BIG glow */
        box-shadow: 0px 0px 5px #4195fc; 
        -moz-box-shadow: 0px 0px 5px #4195fc;
        -webkit-box-shadow: 0px 0px 5px #4195fc;  
    }
    

提交回复
热议问题