How to have focused Input form with Bootstrap

Question

I'm using Bootstrap 3.0.0 and I want to use the focused input form: See here, under Form States.. input focus

I have used <input class="form-control" id="focusedInput" type="text" value="This is focused..."> this to get it as focused, but I'm not getting that. Documentation said to use :focus to get focused but I don't know how.

some code in bootstrap.css

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.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);
}

Answer 1

You can achieve what you want by setting the autofocus attribute inside the input tag to autofocus. The keyboard input will be focused on the input field and it will glow.

<input class="form-control" id="focusedInput" type="text" autofocus="autofocus" value="This is focused...">

Answer 2

They present there only a focus demo. The #focusedInput styles come from docs.css and it's used just to force the focused look. That isn't included in Bootstrap pack, but only in documentation pages, as you can see in the following screen shoot (see: docs.css:1072):

Then we have to create a CSS class that will have the focused styles:

.focusedInput {
    border-color: rgba(82,168,236,.8);
    outline: 0;
    outline: thin dotted \9;
    -moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
    box-shadow: 0 0 8px rgba(82,168,236,.6) !important;
}

Now, only including focusedInput class in HTML input elements, you will be able to set focus styles for non-focused elements.

<input class="form-control focusedInput" type="text" value="This is focused...">

See the JSFIDDLE

---

:focus selector is used for setting the styles for focused state of input.

JSFIDDLE

For example:

#focusedInput:focus {
    background: red;
}

This will set red background when you focus the input.