Как настроить текст выбора опции? - PullRequest
Новая
       8

Как настроить текст выбора опции?

0 голосов
/ 13 января 2019

Мне нужно уменьшить высоту полей формы, она отлично работает на всех полях, кроме опции выбора, которая разрушается. Похоже, что верхний отступ так сильно отличается от размера, если есть способ переместить текст опции вверх, что было бы хорошим решением. https://jsfiddle.net/04uv38e7/

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <style type="text/css">
      .row.form {
        display: flex;
        justify-content: center;
      }
      .form-control {
       height: 28px;
      }
      h5 {
        color: black;
      }
    </style>
    <title></title>
  </head>
  <body>
<div class="form-wrap"> 
<div class="container-outer">
  <div class="container">
      <div class="row">
          <div class="col-sm-12 text-center">
          <h5>Book A Trip</h5>
      </div>
    </div>
    <form>
      <div class="row form">
      <div class="col-6 col-sm-6 col-md-2 form-group">
        <input type="text" class="form-control" placeholder="First name">
      </div>
      <div class="col-6 col-sm-6 col-md-2 form-group">
       <input type="text" class="form-control" placeholder="Last name">
      </div>
      <div class="col-6 col-sm-6 col-md-2 form-group">
        <input type="text" class="form-control" placeholder="Email">
      </div>
      <div class="col-6 col-sm-6 col-md-2 form-group">
        <select class="form-control input-sm">
          <option>Select property type</option>
          <option>Villa</option>
          <option>Plot</option>
        </select>
      </div>
      <div class="btndiv col-12 col-sm-12 col-md-2">
        <button class="btn">Submit</button>
      </div>
    </div>
    </form>    
  </div> <!-- container end -->
</div> <!-- outer container end -->
</div> <!-- wrapper -->
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

1 Ответ

0 голосов
/ 13 января 2019

добавить style="padding:0 7px 3px" к тегу <select>.

как видите: 

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <style type="text/css">
      .row.form {
        display: flex;
        justify-content: center;
      }
      .form-control {
       height: 28px;
      }
      h5 {
        color: black;
      }
    </style>
    <title></title>
  </head>
  <body>
<div class="form-wrap"> 
<div class="container-outer">
  <div class="container">
      <div class="row">
          <div class="col-sm-12 text-center">
          <h5>Book A Trip</h5>
      </div>
    </div>
    <form>
      <div class="row form">
      <div class="col-6 col-sm-6 col-md-2 form-group">
        <input type="text" class="form-control" placeholder="First name">
      </div>
      <div class="col-6 col-sm-6 col-md-2 form-group">
       <input type="text" class="form-control" placeholder="Last name">
      </div>
      <div class="col-6 col-sm-6 col-md-2 form-group">
        <input type="text" class="form-control" placeholder="Email">
      </div>
      <div class="col-6 col-sm-6 col-md-2 form-group">
        <select class="form-control input-sm" style="padding:0 7px 3px">
          <option >Select property type</option>
          <option>Villa</option>
          <option>Plot</option>
        </select>
      </div>
      <div class="btndiv col-12 col-sm-12 col-md-2">
        <button class="btn">Submit</button>
      </div>
    </div>
    </form>    
  </div> <!-- container end -->
</div> <!-- outer container end -->
</div> <!-- wrapper -->
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...