development:css:glow_input

Differences

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


—development:css:glow_input [2019/10/31 09:04] (current) – created - external edit 127.0.0.1
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>