HTML: при нажатии на переключатель radio - отобразить числовое поле ввода в той же линии

192
03 января 2019, 02:30

При нажатии на переключатель типа radio "Указать размер" поле ввода отображается под переключателем (в колонке),а необходимо в отобразить в одной линии с переключателем. подскажите, пожалуйста, вариант решения

#own:not(:checked) ~ #own-size { display: none }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 
 
 
<h3>Размер</h3> 
 
<div class="d-flex flex-column align-items-start"> 
 
  <div class="custom-control custom-radio"> 
    <input type="radio" class="custom-control-input" name="answer" checked="checked" value="no" / id="man"> <label class="custom-control-label" for="man"> <h5>Стандартный мужской</h5> </label> 
  </div> 
  <div class="custom-control custom-radio"> 
    <input type="radio" class="custom-control-input" name="answer" value="yes" id="woman" /><label class="custom-control-label" for="woman"> <h5>Стандартный женский</h5> </label> 
  </div> 
  <div class="custom-control custom-radio text-left mb-4" id="own-input"> 
    <input type="radio" class="custom-control-input" name="answer" value="other" id="own" /> <label class="custom-control-label" for="own"> <h5> Указать размер</h5> </label> 
 
    <div class="input-group mb-2 mr-sm-2" id="own-size"> 
      <label class="sr-only" for="product-own-size-input">Size</label> 
      <input type="number" class="form-control" id="product-own-size-input" placeholder="размер"> 
      <div class="input-group-append"> 
        <span class="input-group-text">см</span> 
      </div> 
    </div> 
  </div> 
 
 
</div> 
 
 
<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>

Answer 1

#own:not(:checked) ~ #own-size { display: none } 
#own-input {display: flex} 
#own-input label {flex-basis: 100%; }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 
 
 
<h3>Размер</h3> 
 
<div class="d-flex flex-column align-items-start"> 
 
  <div class="custom-control custom-radio"> 
    <input type="radio" class="custom-control-input" name="answer" checked="checked" value="no" / id="man"> <label class="custom-control-label" for="man"> <h5>Стандартный мужской</h5> </label> 
  </div> 
  <div class="custom-control custom-radio"> 
    <input type="radio" class="custom-control-input" name="answer" value="yes" id="woman" /><label class="custom-control-label" for="woman"> <h5>Стандартный женский</h5> </label> 
  </div> 
  <div class="custom-control custom-radio text-left mb-4" id="own-input"> 
    <input type="radio" class="custom-control-input" name="answer" value="other" id="own" /> <label class="custom-control-label" for="own"> <h5> Указать размер</h5> </label> 
 
    <div class="input-group mb-2 mr-sm-2" id="own-size"> 
      <label class="sr-only" for="product-own-size-input">Size</label> 
      <input type="number" class="form-control" id="product-own-size-input" placeholder="размер"> 
      <div class="input-group-append"> 
        <span class="input-group-text">см</span> 
      </div> 
    </div> 
  </div> 
 
 
</div> 
 
 
<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> 
========================================================================

Как пример с флексом. Думаю доработать не составит труда

READ ALSO
Вопрос по макету

Вопрос по макету

Верстаю учебный макет и наткнутся на блок:

246
Как сделать плавный скролл якоря?

Как сделать плавный скролл якоря?

Перепробовал миллион способов, ничего не помогаетНужно сделать плавный скролл от button до div

266
Как отключить режим чтения для сайта

Как отключить режим чтения для сайта

Как отключить режим чтения на сайте и возможно ли такое? На моем сайте не совсем корректно отображается режим чтенияКак отключить для пользователей...

192
Как внедрить в название чекбокса ссылку?

Как внедрить в название чекбокса ссылку?

Есть чекбокс, сбоку от него, как положено - строчка текстаНо часть этой строчки - ссылка

174