別のクラスの境界線をどのように変更するか？

 <form class="navbar-form" > 
      <div class="input-group"> 
       <input type="text" class="form-control search-form" placeholder="Search"> 
       <span class="input-group-btn"><button type="submit" class="btn btn-primary search-btn"><i class="fa fa-search"></i> 
       </button></span> 
      </div> 
     </form> 


.search-form { 
border-radius: 30px 0px 0px 30px; 
background-color: transparent; 
border: 1px solid #ffffff; 
border-right: 0px; 
} 
.search-btn { 
border-radius: 0px 30px 30px 0px; 
cursor:pointer; 
background-color: transparent; 
border: 1px solid #ffffff; 
border-left: 0px; 
}

.form-controlクラスに焦点を当てると、.search-btnの境界を.form-controlと同じにするにはどうすればよいですか。入力フィールドに焦点を当てると、入力フィールドと検索ボタン＃fd9128の境界線の色を作りたいと思います。別のクラスの境界線をどのように変更するか？

出典

2017-11-20 Ashutosh Shrestha

.search-form:focus .search-btn { 
    border-radius: 30px 0px 0px 30px;  
    border: 1px solid #ffffff; 
    border-right: 0px; 
}

出典

2017-11-20 05:04:25

ボタン

.search-form:focus + .input-group-btn button{ 
    background: transparent; 
    border-color: #66afe9; 
    color: #66afe9; 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); 
}

.search-form { 
 
    border-radius: 30px 0px 0px 30px; 
 
    background-color: transparent; 
 
    border: 1px solid #ffffff; 
 
    border-right: 0px; 
 
} 
 
.search-btn { 
 
    border-radius: 0px 30px 30px 0px; 
 
    cursor:pointer; 
 
    background-color: transparent; 
 
    border: 1px solid #ffffff; 
 
    border-left: 0px; 
 
} 
 
.search-form:focus + .input-group-btn button{ 
 
    background: transparent; 
 
    border-color: #66afe9; 
 
    color: #66afe9; 
 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script> 
 
<form class="navbar-form" > 
 
    <div class="input-group"> 
 
     <input type="text" class="form-control search-form" placeholder="Search"> 
 
     <span class="input-group-btn"><button type="submit" class="btn btn-primary search-btn"><i class="fa fa-search"></i> 
 
     </button></span> 
 
    </div> 
 
</form>

出典

2017-11-20 05:05:41

.search-form { 
 
border-radius: 30px 0px 0px 30px; 
 
background-color: transparent; 
 
border: 1px solid #ffffff; 
 
border-right: 0px; 
 
} 
 
.search-btn { 
 
border-radius: 0px 30px 30px 0px; 
 
cursor:pointer; 
 
background-color: transparent; 
 
border: 1px solid #ffffff; 
 
border-left: 0px; 
 
    color:blue 
 
} 
 
.search-form:focus ~span .search-btn{ 
 
    border-color: #66afe9; 
 
    outline: 0; 
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); 
 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <form class="navbar-form" > 
 
    <div class="input-group"> 
 
     <input type="text" class="form-control search-form" placeholder="Search"> 
 
     <span class="input-group-btn"><button type="submit" class="btn btn-primary search-btn"><i class="fa fa-search">Submit</i> 
 
     </button></span> 
 
    </div> 
 
    </form> 
 
</body> 
 
</html>

以下のコードを使用してフォーカスのために、このCSSを追加

出典

2017-11-20 05:08:36

別のクラスの境界線をどのように変更するか？

答えて

関連する問題