Вертикальная линия между текстовыми вводами - PullRequest
Новая
       6

Вертикальная линия между текстовыми вводами

0 голосов
/ 18 марта 2019

Я пытаюсь создать окно поиска следующим образом: текстовое поле и раскрывающийся список отображаются в виде одного элемента, разделенного небольшой вертикальной линией. Как показано на рисунке ниже. Я сосредоточен на реализации этой вертикальной линии между «Имя» и «Место» enter image description here

Я пытаюсь реализовать это через CSS в HTML. Я попытался настроить отображение границы справа от текстового поля «Имя» как видимое и удалить все остальные границы. 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  
  <form>
    <div class="form-group" style="display:flex; background-color: ;">
      <input type="text" class="form-control" style="border:none; border-right: 1px solid black; border-radius:50px;">
      <div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" style="background-color: white; color:black; border:none">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu" style="background-color: white;">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div></div>
  </form>
</div>

</body>
</html>

Но это не работает. Поскольку мне нужно закругленные углы для моего текстового поля, мне кажется, что это сложно реализовать. Есть ли другие методы, чтобы решить это? Как я могу сделать вид, как ожидалось? Пожалуйста помоги. Заранее спасибо.

Ответы [ 2 ]

3 голосов
/ 18 марта 2019

Проверка обновленных изменений с помощью строки 

border-radius:50px 0px 0px 50px;

и

с использованием 

.dropdown:before{
  position:absolute;
  content:'';
  left:0px;
  height:28px;
  width:2px;
  background:#000000;
  top:3px;
}


.dropdown .btn{
  height:34px;
}

.form-group input:focus,.form-group .dropdown:focus,.form-group button:focus{
  outline:0px;
  box-shadow: none;
}



.dropdown:before{
  position:absolute;
  content:'';
  left:0px;
  height:28px;
  width:2px;
  background:#000000;
  top:3px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  
  <form>
    <div class="form-group" style="display:flex; background-color:#000000; height:40px; padding:3px 0px;">
      <input type="text" class="form-control" style="border:none; border-radius:50px 0px 0px 50px;">
      <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" style="background-color: white; color:black; border:none; border-radius:0px;">Dropdown Example
        <span class="caret"></span></button>
        <ul class="dropdown-menu" style="background-color: white;">
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
        </ul>
      </div>
      <button class="btn btn-primary" type="button" data-toggle="dropdown" style="background-color: green; color:white; border:none; border-radius:0px 50px 50px 0px;">icon
    </div>
  </form>
</div>

</body>
</html>
0 голосов
/ 18 марта 2019 

input#your-txt-box{
  
  border:5px solid #fff;
  border-right-color:#1f2225;
  border-top-right-radius:5px;
  border-bottom-right-radius:5px;
  /*box-shadow:inset 0px 0px 1px 1px #000;*/
  width:200px;
  box-sizing:border-box;
}
div#search-box-containers{
  background-color:#1f2225;
  padding:5px; 
  width:400px;
 }
 div#search-box-containers>div{
   border:5px solid #3f2031;
   display:flex;
   background-color:#fff;
   padding-top:5px;
   padding-bottom:5px;
   }
   select#your-drop-down-menu{
     border:5px solid #fff;
     border-left-width:0px;
     margin-left:0px;
     width:200px;
     box-sizing:border-box;
   }
   
   
<div id="search-box-containers">
<div>
  <input type="text" id="your-txt-box"/><select id="your-drop-down-menu">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</div>

</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...