回答OP

Question

我的搜索框在选中时会创建一个非常浅蓝色的边框，而我似乎无法弄清楚选择器导致了什么。我首先使用它来定位搜索框以更改样式。

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

Answer 1

它是outline属性，它会在:focus

上触发

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

删除对焦环

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

回答OP

您误将box-shadow误认为:focus。所以要回答你的问题，请添加以下css

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

目标/焦点/选择上的bootstrap搜索框问题

1 个答案:

回答OP