How can I set the width of select box options?

by

I tried to find a solution from CSS. But I failed to do it. Doesn’t matter, I have written a simple javascript code for it. This is can do it something for it.

function shortString(selector) {
  const elements = document.querySelectorAll(selector);
  const tail="...";
  if (elements && elements.length) {
    for (const element of elements) {
      let text = element.innerText;
      if (element.hasAttribute('data-limit')) {
        if (text.length > element.dataset.limit) {
          element.innerText = `${text.substring(0, element.dataset.limit - tail.length).trim()}${tail}`;
        }
      } else {
        throw Error('Cannot find attribute \'data-limit\'');
      }
    }
  }
}

window.onload = function() {
  shortString('.short');
};
select {
  width: 250px;
}

option {
  width: 250px;
}
<select name="select" id="select">
  <option class="short" data-limit="37" value="Select your University">Select your University</option>
  <option class="short" data-limit="37" value="Bangladesh University of Engineering and Technology">Bangladesh University of Engineering and Technology</option>
  <option class="short" data-limit="37" value="Mawlana Bhashani Science and Technology University">Mawlana Bhashani Science and Technology University</option>
</select>

More Related Contents:

  1. How to style the with only CSS?
  2. How to style a select tag’s option element?
  3. How can I change the font-size of a select option? [duplicate]
  4. Can I colour backgrounds of selected items in HTML select options with CSS only?
  5. How to change the cursor into a hand when a user hovers over a list item?
  6. What does the CSS rule “clear: both” do?
  7. Why do the :before and :after pseudo-elements require a ‘content’ property?
  8. Hide text node in element, but not children
  9. How and where to use ::ng-deep?
  10. Combining :last-child with :not(.class) selector in CSS
  11. Using HTML data-attribute to set CSS background-image url
  12. What are `scrolling boxes`?
  13. How can I apply multiple transform declarations to one element?
  14. Float right and position absolute doesn’t work together
  15. Converting and rendering web fonts to base64 – keep original look
  16. Why doesn’t inset box-shadow work over images?
  17. text-overflow ellipsis on flex child not working [duplicate]
  18. Make HTML5 video poster be same size as video itself
  19. Why does stacking order change on webkit filter hover?
  20. css text gradient
  21. Is this possible to create 2-axis 4 color gradient in css (bilinear gradient)?
  22. Make CSS3 triangle with linear gradient
  23. Can I have different colored left and top borders in CSS?
  24. Safe width in pixels for printing web pages?
  25. CSS text align justify big spaces
  26. CSS: equal height columns
  27. Purpose of *:before, *:after rule without content property
  28. CSS Selector for not a child of element type?
  29. using a div to blur an image behind it? [duplicate]
  30. CSS: clean solution to the margin collapse issue when floating an element

Leave a Comment