0

I'm working on a project that needs to use materializecss.

Originally I when I used bootstrap and I could make an Editable DropDown/select box. Here is an example code of that: https://codepen.io/cfmatre/pen/LGOdjq

In materialize you can create a dropdown with:

<div class="input-field col s12">
    <select multiple>
        <option value="" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <label>Materialize Multiple Select</label>
</div>

But this does not allow you to manually edit it like in the bootstrap example.

Does materialize support this, or is there an easy way to get it to do the same thing?

Update: It seems it already replaces the tag with a list, here is a snippet of the live code:

    <div class="select-wrapper">
    <span class="caret">▼</span>
        <input type="text" class="select-dropdown" readonly="true" data-activates="select-options-0d9542b7-ca78-df34-51ab-f19edd342ec0" value="Choose your option">
    <ul id="select-options-0d9542b7-ca78-df34-51ab-f19edd342ec0" class="dropdown-content select-dropdown" style="width: 991px; position: absolute; top: 0px; left: 0px; display: none; opacity: 1;">
    <li class="disabled"><span>Choose your option</span></li>
    <li class=""><span>Option 1</span></li>
    <li class=""><span>Option 2</span></li>
    <li class=""><span>Option 3</span></li>
    </ul>
<select data-select-id="0d9542b7-ca78-df34-51ab-f19edd342ec0" class="initialized">
                            <option value="" disabled="" selected="">Choose your option</option>
                            <option value="1">Option 1</option>
                            <option value="2">Option 2</option>
                            <option value="3">Option 3</option>
                        </select></div>

As you can see it sets the input box to read only. So in my case I will need this to still be edible instead of read only, which I am not sure how to do.

jLynx
  • 1,111
  • 3
  • 20
  • 36

2 Answers2

0

Your bootstrap code uses lists, while materializecss uses select form.

Select form are harder and more complicated to style.

"The select element is part of the operating system, not the browser chrome. Therefore, it is very unreliable to style, and it does not necessarily make sense to try anyway."

To style select form follow the link below:

How to style a <select> dropdown with CSS only without JavaScript?

Kushtrim
  • 1,899
  • 6
  • 14
  • It seems to be already styles though since when you expand it and look at the source, it actually uses lists. That means all I need to do is only have the drop down trigger when I click the caret instead of the box and allow it to be editable since its is already an input. Do you know how I would do that? I have updated my post. – jLynx Oct 31 '17 at 09:42
0

Select tags are very limited when it comes to customisation, they are at the mercy of your browser as to how they are styled.

The codepen example you provided is using lists and works with jQuery.

cnrhgn
  • 703
  • 4
  • 18
  • It seems to be already styles though since when you expand it and look at the source, it actually uses lists. That means all I need to do is only have the drop down trigger when I click the caret instead of the box and allow it to be editable since its is already an input. Do you know how I would do that? I have updated my post. – jLynx Oct 31 '17 at 09:42