CSS HTML Create a glowing border around an Input Field

Question

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 Twitter border      I also don t quite know how to create the rounded corners

User · Answer

You better use Twitter Bootstrap which contains all of this nice stuff inside. Particularly here is exactly what you want.

In addition, you can use different themes built for Twitter Bootstrap from this website

User · Answer

Use a normal blue border  a medium border-radius  and a blue box-shadow with position 0 0

User · Answer

Below is the code that Bootstrap uses  Colors are bit different but the concept is same  This is if you are using LESS to compile CSS      Form control focus state       Generate a customized focus state and for any input with the specified color     which defaults to the   input-focus-border  variable        We highly encourage you to not customize the default value  but instead use    this to tweak colors on an as-needed basis  This aesthetic change is based on    WebKit s default styles  but applicable to a wider range of browsers  Its    usability and accessibility should be taken into account with any change        Example usage  change the default blue border and shadow to white for better    contrast against a dark gray background    form-control-focus  color   input-border-focus       color-rgba  rgba red  color   green  color   blue  color    6      amp  focus       border-color   color      outline  0       box-shadow   inset 0 1px 1px rgba 0 0 0  075   0 0 8px   color-rgba             If you are not using LESS then here s the compiled version    form-control focus       border-color   66afe9      outline  0      -webkit-box-shadow  inset 0 1px 1px rgba 0  0  0  0 075   0 0 8px rgba 102  175  233  0 6       box-shadow  inset 0 1px 1px rgba 0  0  0  0 075   0 0 8px rgba 102  175  233  0 6

User · Answer

x000D   x000D      form-fild input  form-fild textarea   focus function     x000D        this  parent   addClass  open    x000D      x000D   x000D      form-fild input  form-fild textarea   blur function     x000D        this  parent   removeClass  open    x000D      x000D   open   x000D    color red     x000D    x000D   form-fild   x000D   position  relative  x000D   margin  30px 0  x000D    x000D   form-fild label   x000D   position  absolute  x000D   top  5px  x000D   left  10px  x000D   padding 5px  x000D    x000D   x000D   form-fild open label   x000D   top  -25px  x000D   left  10px  x000D     background   ffffff    x000D    x000D   form-fild input type  text     x000D   padding-left  80px  x000D    x000D   form-fild textarea   x000D   padding-left  80px  x000D    x000D   form-fild open textarea   x000D   form-fild open input type  text     x000D   padding-left  10px  x000D    x000D  textarea  x000D  input type  text     x000D   padding  10px  x000D   width  100   x000D    x000D  textarea  x000D  input  x000D   form-fild open label  x000D   form-fild label   x000D   -webkit-transition  all 0 2s ease-in-out  x000D         -moz-transition  all 0 2s ease-in-out  x000D           -o-transition  all 0 2s ease-in-out  x000D              transition  all 0 2s ease-in-out  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  container  gt  x000D    lt div class  row  gt  x000D        lt form gt  x000D           lt div class  form-fild  gt  x000D               lt label gt Name   lt  label gt  x000D               lt input type  text  gt  x000D           lt  div gt  x000D           lt div class  form-fild  gt  x000D               lt label gt Email   lt  label gt  x000D               lt input type  text  gt  x000D           lt  div gt  x000D           lt div class  form-fild  gt  x000D               lt label gt Number   lt  label gt  x000D               lt input type  text  gt  x000D           lt  div gt  x000D           lt div class  form-fild  gt  x000D               lt label gt Message   lt  label gt  x000D               lt textarea cols  10  rows  5  gt  lt  textarea gt  x000D           lt  div gt  x000D       lt  form gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

I combined two of the previous answers  jsfiddle    input          round the corners        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 14px  4195fc       -moz-box-shadow  0px 0px 14px  4195fc      -webkit-box-shadow  0px 0px 14px  4195fc

User · Answer

SLaks hit the nail on the head but you might want to look over the changes for inputs in CSS3 in general   Rounded corners and box-shadow are both new features in CSS3 and will let you do exactly what you re looking for   One of my personal favorite links for CSS3 HTML5 is http   diveintohtml5 ep io

User · Answer

How about something like this    http   jsfiddle net UnsungHero97 Qwpq4 1207     CSS  input       border  1px solid  4195fc     some kind of blue border            other CSS styles            round the corners        -webkit-border-radius  4px         -moz-border-radius  4px              border-radius  4px           make it glow         -webkit-box-shadow  0px 0px 4px  4195fc         -moz-box-shadow  0px 0px 4px  4195fc              box-shadow  0px 0px 4px  4195fc     some variation of blue for the shadow

User · Answer

This will create glowing input fields and textareas   textarea textarea focus input input focus      transition  border-color 0 15s ease-in-out 0s  box-shadow 0 15s ease-in-out 0s      border  1px solid  c4c4c4      border-radius  4px      -moz-border-radius  4px      -webkit-border-radius  4px      box-shadow  0px 0px 8px  d9d9d9      -moz-box-shadow  0px 0px 8px  d9d9d9      -webkit-box-shadow  0px 0px 8px  d9d9d9     input focus textarea focus        outline  none      border  1px solid  7bc1f7      box-shadow  0px 0px 8px  7bc1f7      -moz-box-shadow  0px 0px 8px  7bc1f7      -webkit-box-shadow  0px 0px 8px  7bc1f7

User · Answer

Here you go    glowing-border       border  2px solid  dadada      border-radius  7px      glowing-border focus        outline  none      border-color   9ecaed      box-shadow  0 0 10px  9ecaed      Live demo  http   jsfiddle net simevidas CXUpm 1 show    to view the code for the demo  remove  show   from the URL    x000D   x000D  label    x000D      display block  x000D      margin 20px  x000D      width 420px  x000D      overflow auto  x000D      font-family sans-serif  x000D      font-size 20px  x000D      color  444  x000D      text-shadow 0 0 2px  ddd  x000D      padding 20px 10px 10px 0  x000D    x000D   x000D  input   x000D      float right  x000D      width 200px  x000D      border 2px solid  dadada  x000D      border-radius 7px  x000D      font-size 20px  x000D      padding 5px  x000D      margin-top -10px      x000D    x000D   x000D  input focus    x000D      outline none  x000D      border-color  9ecaed  x000D      box-shadow 0 0 10px  9ecaed  x000D    x000D   lt label gt  Aktuelles Passwort   lt input type  password  gt   lt  label gt  x000D   lt label gt  Neues Passwort   lt input type  password  gt   lt  label gt  x000D   x000D   x000D

User · Answer

input type  text        include 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     include box-shadow 0 0 5px rgba 81  203  238  1      -webkit-box-shadow  0px 0px 5px  007eff      -moz-box-shadow  0px 0px 5px  007eff      box-shadow  0px 0px 5px  007eff

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

Examples related to html

Examples related to css

Examples related to input

Examples related to border

Examples related to glow