How to make a colorful gradient glow around your input-box?


Tags: html,css

Problem :

I know that for blue glow around the box, we just need to applied the code below to our CSS:

enter image description here

.glowing-border {
    border: 2px solid #dadada;
    border-radius: 7px;
}

.glowing-border:focus { 
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}

Now I want to take my input-box to a next level.

enter image description here

I want it to look like this - rather than blue glow. I want to have a nice rainbow gradient effect on it.

Is there any CSS Expert out there and think that this is doable for me ?


Don't have to be CSS, if someone have any suggestion on how to get this done in a different way - please leave a comment or answer.



Solution :

I think you can do that by using two additional divs. One to be the wrap (also having the background gradient) with an white inset box shadow for the feather effect, and one div behind the input area with a white background and outer box shadow.

enter image description here

I assumed that you form background color is white.

.rainbowWrap {
    width: 200px;
    background: //your gradient...
    padding: 4px;
    box-shadow: inset 0px 0px 5px 3px white;
    border-radius: 2px;
    position:relative;
    z-index: 1;
}

.rainbowBg {
    width: 184px;
    height:15px;
    background: white;
    position:absolute;
    top: 10px;
    left: 10px;
    box-shadow: 0px 0px 7px 2px white, 0px 0px 13px 2px white;
    border-radius: 4px;
    z-index: 2;
}

.rainbow {
    width:186px;
    background:transparent;
    border:1px solid rgba(255,255,255,0.5);
    padding: 5px;
    border-radius: 4px;    
    outline:none;
    display: block;
    position:relative;
    z-index: 500;
    color:#666;
}

Note that I have only wrote code and only tested in Google Chrome.

Fiddle: http://jsfiddle.net/b03acbdu/5/


    CSS Howto..

    How to render email template in a page?

    How to use :hover for one element and chnage another class css proprties

    How to make width of element full width of screen and not parent css

    How to implement this logic in CSS?

    How to create dynamic table 4 columns per row using GridView?

    How to get the first letter of each word to be a different size and the rest to be the same size

    Django. how to apply css style on boolean form field?

    How to force input type text within span width

    Html/Css - How to get an image to stretch 100% width of a container then display another image over it?

    how to style a symfony2 form button

    How to make text to wrap image in editor

    CSS+HTML: How to draw table/cell border

    How do I style JUST the reflection of the content without affecting its original source?

    How do I display a DIV if the current version of the program is greater than the version I have?

    How to keep an element fixed top within another element?

    CSS: How to build a vertical separator with margin on its top and bottom? [closed]

    How to create border bottom with 2 different color?

    How to centralise a button div

    How does Twitter put labels inside textboxes?

    How many digits after the decimal point are interpreted in stylesheet rules?

    How to apply css animation to angular view when the view is called

    How to apply multiple css radial gradients to a single element

    How to Generate All Possible CSS 2 Selector Combinations?

    How to make a child div to grow to full screen using CSS?

    How to add space between CSS table rows?

    How to keep text in same position?

    How to resolve css incompabilities/differences between different versions of IE?

    How do I select an element in the dom with an attribute of ct:value?

    how do i prevent respond.js reading my retina display media query?

    CSS: How to blur background image within the div?