bootstrap проблема с полем поиска на цели / фокус / выбрать

Мое поле поиска создает очень светло-синюю границу при выборе, что я, кажется, не могу понять, что селектор вызывает это. Я использовал это, чтобы нацелить поле поиска в первую очередь, чтобы изменить стили.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title><%= title %></title>

<!-- Bootstrap -->
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--Custom CSS-->
<link rel="stylesheet" href='/stylesheets/codecademy/Bolt.css'>
<!-- Latest compiled and minified JavaScript -->
<!--JQuery-->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<!--Bootstrap-->
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src='/bower_components/angular/angular.min.js'></script>
</head>
<body>
<div class="main">
    <div class="container">
        <div class='row'>
          <div class='col-xs-12 col-sm-6 col-md-5 col-lg-3 text-center'>
            <img src='https://s3.amazonaws.com/codecademy-content/projects/bolt-network/logo.svg'>
          </div><!--End of col-md-6-->
          <div id='navigation' class=' col-xs-12 col-sm-3 col-sm-offset-2 col-md-3 col-md-offset-4 col-lg-2 col-lg-offset-7 nav-center'>
            <ul class="nav nav-pills">
                <li><a href='#'>Log In</a></li>
                <li><a href='#'>Sign Up</a></li>
            </ul>
          </div><!--End of col-xs-12-->
        </div><!--End of row-->
        <div class='row'>
            <div class='col-xs-12'>
                <h1 class='text-center'>Watch your favorite movies, instantly.</h1>
            </div><!--End of col-xs-12-->
        </div><!--End of row-->
        <div class='row'>
          <div class='col-xs-12 text-center'>
            <a class='btn btn-default btn-link' href='#'>Learn More</a>
          </div><!--End of learnlink-->
        </div><!--End of row--> 
        <div class='row'>
            <div class='col-xs-12 col-sm-12 col-md-12'>
                <form class='form-horizontal'>
                    <div class="row">
                        <div class='col-xs-8 col-sm-10'>
                           <input class='form-control' type="search" placeholder="Browse the collection"> 
                        </div><!--End of col-xs-9-->
                        <div class='col-xs-4 col-sm-2'>
                            <input class='form-control btn-link' type='submit' value='Search'>
                        </div><!--End of col-xs-3-->
                    </div><!--End of row-->
                </form>
            </div><!--End of col-xs-8-->
        </div><!--End of row-->

  </div><!--End of container-->
</div><!--End of main-->
</body>
</html>

стиль CSS:

body {
font-family: "Oxygen", sans-serif;
color:white;
font-weight: 300; 
margin: 0;
padding: 0;
}

.no-pad{
margin:0px;
padding:0px;
}

.main{
background-color:black;
}

.main img{
margin:20px 0px 10px 0px;
}

.nav-pills li:nth-child(2){
border:1px solid #317AA1;
border-radius:4px;
}

.nav-center ul{
margin:20px 0 10px 0;
}

.btn-link {
color: #317AA1;
background-color: transparent;
border-color: #317AA1;
border-radius:4px;
}

.btn-link:hover {
color: white;
background-color: #317AA1;
border-color: #317AA1;
border-radius:4px;
}

form{
margin:20px 0px 10px 0px;
}

input[type=search]{
background-color:transparent;
border:none;
border-bottom:1px solid white;
border-radius:0px;
}

input[type=search]:focus{
outline:0px !important;
}

@media (max-width: 425px) {
.nav-center {  
  text-align: center;
}

.nav-center ul {
    display: inline-block;
}

.nav-center li {
    display: inline
}

.nav-center a {
    float: left;
    color:#317AA1;
}
}
Метки

1 ответ

  1. это outlineсвойство и оно вызывает дальше:focus

    input[type="submit"]:focus {
     outline: #aaa solid 2px;
    }
    

    удаление фокусного кольца

    input[type="submit"]:focus {
     outline: 0;
    } 
    

    Just to answer OP

    Вы приняли box-shadowза :focusкольцо.
    поэтому, чтобы ответить на ваш вопрос, добавьте следующий css

    input[type=search]:focus{
    box-shadow: none;
    }