Eureka Moment Wiki

One eureka moment at the time

User Tools

Site Tools


development:css:glow_input

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

development:css:glow_input [2017/12/12 10:06] (current)
tplecko created
Line 1: Line 1:
 +====== Glowing input highlight ======
 +Here is how to make a glowing text input. It glows when focused
  
 +CSS:
 +<code css>
 +input[type=text],​ textarea {
 +-webkit-transition:​ all 0.30s ease-in-out;​
 +-moz-transition:​ all 0.30s ease-in-out;​
 +-ms-transition:​ all 0.30s ease-in-out;​
 +-o-transition:​ all 0.30s ease-in-out;​
 +outline: none;
 +padding: 3px 0px 3px 3px;
 +margin: 5px 1px 3px 0px;
 +border: 1px solid #DDDDDD;
 +}
 +
 +input[type=text]:​focus,​ textarea:​focus {
 +box-shadow: 0 0 5px rgba(81, 203, 238, 1);
 +padding: 3px 0px 3px 3px;
 +margin: 5px 1px 3px 0px;
 +border: 1px solid rgba(81, 203, 238, 1);
 +}
 +</​code>​
development/css/glow_input.txt · Last modified: 2017/12/12 10:06 by tplecko