Question 44003 in Html Question posted in
Some basic documentation can be found here.

PHP Select Menu option value font display with two front size – Html

example image

Below is my script for the drop down menu, how to make the text inside option value will have small front size ? I try to use span to make the front size but not working

<select name="metal-type" class="form-select form-select-lg" aria-label="Default select example" id="metalSelector">
   <option value="au" selected>Gold <span front-size="10px;">(1gram - 0.243usb)<span></option>
   <option value="ag">Silver <span front-size="10px;">(1gram - 0.200usb)<span></option>
</select>

How to make the text inside option value will have small front size ?

Tags:

2

Answers


  1. 0

    You are not able to do that with plain HTML and CSS. (At least not with Select and Option only)

    You will have to introduce this behavior yourself.

    The suggested way is to use a Frontend Framework like Bootstrap Accordions + JS or materials.

    If you want to go the hard way, you may develop it your self.

    Something like:

    $(function () {
  // jQuery selectors
  var $options = $('.options');
  var $selection = $('.selection');
  var $selected = $('.selected');
  var $labels = $('.options label');

  // Event Functions
  var clickSelection = function () {
    $options.toggle();
  };
  var clickLabel = function () {
    $options.hide();
    $selected.html($(this).html());
  };
  
  // Event assignment
  $selection.click(clickSelection);
  $labels.click(clickLabel);
  
});
    * {
  font-family: arial;
}

.select-box {
  position: relative;
  width: 300px;
  cursor: pointer;
  border: 1px solid grey;
  padding: 5px;
  background-color: white;
}

.drop {
  color: black;
  position: absolute;
  right: 5px;
  top: 5px;
}

.options {
  display: none;
  position: absolute;
  padding: 5px;
  background-color: white;
  border: 1px solid grey;
  margin-top: 7px;
}

.options input {
  display: none;
}

.options label {
  display: block;
  padding: 5px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<div class="select-box">
  <div class="selection"><span class="selected">Click me to select...</span> <span class="drop">&#9660;</span></div>
  <div class="options">
    <input type="radio" id="opt-1" name="id" value="1">
    <label for="opt-1">My test <small style="color:grey">UP an AWAY</small></label>
    <input type="radio" id="opt-2" name="id" value="2">
    <label for="opt-2">My test <b>Bold descition</b></label>
    <input type="radio" id="opt-3" name="id" value="3">
    <label for="opt-3">My test <i>sharp coners</i></label>
  </div>
</div>


<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    Login or Signup to reply.
  2. 0

    Span is not a valid element inside an option HTML element.

    1. If you want a dropdown for which you can customize the options (since you tagged bootstrap-4) https://getbootstrap.com/docs/4.0/components/dropdowns/.

    2. There are also other easy-to-use solutions like select2 which would work for your usecase (https://select2.org/getting-started/basic-usage).

    3. You could also build it yourself, there are plenty of tutorials and examples eg like https://jssecrets.com/how-to-build-custom-javascript-select-dropdown/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search