Как установить ширину тега <option>с помощью тега <select>, используя css? - PullRequest
0 голосов
/ 03 октября 2019

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>

<body>
  <div class="col-md-6 valtype" id="pass_val">Type :
    <div class="">
      <select name="" aria-controls="" class="form-control select-focus">
        <option value="">Select</option>
        <option value="4"> Debtor out of area</option>
        <option value="5"> Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area</option>
        <option value="29">Consumer old</option>
        <option value="6">determine action</option>

      </select><span></span></div>
  </div>

</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>

<body>
  <div class="col-md-6 valtype" id="pass_val">Type :
    <div class="">
      <select name="" aria-controls="" class="form-control select-focus">
        <option value="">Select</option>
        <option value="4"> Debtor out of area</option>
        <option value="5"> Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area</option>
        <option value="29">Consumer old</option>
        <option value="6">determine action</option>

      </select><span></span></div>
  </div>

</body>

</html>

У меня есть выпадающий список, но есть одна проблема: при увеличении содержимого ширина параметра также увеличивается, а ширина выбора остается неизменной.

хотите, чтобы ширина этого параметра оставалась равной ширине выбора, если содержимое будет увеличиваться.

1 Ответ

1 голос
/ 03 октября 2019

, если я правильно понял, ваш вопрос заключается в том, что вы хотите:
, когда вы выбираете опцию, тег выбора остается неизменным и не меняет свой размер, независимо от того, какая опция выбрана, поэтому я предлагаю свое решение:

#mySelect select
{ 
width:150px; 
}
<div id='mySelect'>
      <select name="" aria-controls="" class="form-control select-focus">
        <option value="">Select</option>
        <option value="4"> Debtor out of area</option>
        <option value="5"> Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area</option>
        <option value="29">Consumer old</option>
        <option value="6">determine action</option>

      </select><span></span></div>
  </div>

надеюсь, мой ответ поможет вам

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