发表新帖
发表新帖

Change Bootstrap input focus blue glow

后端 未结
关注
19 2026
抹茶落季
抹茶落季 2020-11-30 16:53

Does anyone know the how to change Bootstrap\'s input:focus? The blue glow that shows up when you click on an input field?

相关标签:
19条回答
  • 借酒劲吻你
    2020-11-30 17:25

    Simple one

    To remove it:

    .form-control, .btn {
    box-shadow: none !important;
    outline: none !important;
}

    To change it

    .form-control, .btn {
    box-shadow: new-value !important;
    outline: new-value !important;
}
    0 讨论(0)
  • [愿得一人]
    2020-11-30 17:27

    Add an Id to the body tag. In your own Css (not the bootstrap.css) point to the new body ID and set the class or tag you want to override and the new properties. Now you can update bootstrap anytime without loosing your changes.

    html file: 

      <body id="bootstrap-overrides">

    css file: 

    #bootstrap-overrides input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, textarea:focus{
  border-color: red;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}

    See also: best way to override bootstrap css

    0 讨论(0)
  • 没有蜡笔的小新
    2020-11-30 17:27

    For the input border before the focus. You can specify your favorite color you want to use and other css like padding etc

    
.input {
    padding: 6px 190px 6px 15px;
    outline: #2a65ea auto 105px ;
}

    When we focus on input. You can specify your favorite color outline you wish

    
.input:focus{
    box-shadow: none;
    border-color: none;
    outline: lightgreen auto 5px ;
}
    0 讨论(0)
  • 野的像风
    2020-11-30 17:28

    For Bootstrap v4.0.0 beta release you will need the following added to a stylesheet that overrides Bootstrap (either add in after CDN/local link to bootstrap v4.0.0 beta or add !important to the stylings:

    .form-control:focus {
  border-color: #6265e4 !important;
  box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}

    Replace the border-color and the rgba on the box-shadow with which ever colour style you'd like*.

    0 讨论(0)
  • 长情又很酷
    2020-11-30 17:31

    Actually, in Bootstrap 4.0.0-Beta (as of October 2017) the input element isn't referenced by input[type="text"], all Bootstrap 4 properties for the input element are actually form based.

    So it's using the .form-control:focus styles. The appropriate code for the "on focus" highlighting of an input element is the following:

    .form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: none;
}

    Pretty easy to implement, just change the border-color property.

    0 讨论(0)
  • 借酒劲吻你
    2020-11-30 17:35

    In Bootstrap 3.3.7 you can change the @input-border-focus value in the Forms section of the customizer:

    0 讨论(0)
 看不清?
提交回复
热议问题