CODEWITHSUNDEEP
htmlcsshtml-select
user3639569
user3639569

Reputation: 109

How to set <option> tag's width with <select> tag's using css?

<!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>

I have drop down list but here is one problem that when content is increase then option's width also increase but select's width is remain same.

So i want that option's width remain equal to select's width if content will be increase.

Upvotes: 0

Views: 132

Answers (1)

abdelhak51
abdelhak51

Reputation: 579

if I correctly understood your question is that you want :
when you choose an option the select tag remains the same and does not change its size whatever the option is selected so I propose my solution:

#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>

hope my answer can help you

Upvotes: 1

Related Questions