13

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

5 回答 5

24

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...">
于 2013-11-16T04:31:26.370 回答
6

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.

于 2013-08-21T05:48:32.037 回答
2 
$("#inputID").focus(); // will bring focus
$("#inputID").addClass("focusedInput"); // will give it the bootstrapped focus style
scrollTo("#confirm_deletion"); // actually make browser go to that input

/* scroll to the given element section of the page */
function scrollTo(element)
{
    $('html, body').animate({scrollTop: $(element).offset().top-60}, 500);
}
于 2013-11-18T12:12:19.550 回答
1

You just needed to remove the space between the :focus selector on the .form-control class.

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

JS FIDDLE

于 2014-03-28T04:20:08.567 回答
0

I had the same problem so i tried to search the css of bootstrap. i had download one theme of bootswatch and replace it with the bootstrap so that might be the problem in my case. Anyhow what i found was that the form-control:focus had outline:0 that means it was disabling the focus effect. i erased that line and worked like a charm.Try it if anyone has the same problem.Hope it helped.

于 2016-07-03T09:37:09.947 回答