Topic: MDB Select Style
<label>Default Select</label>
<select class="browser-default">
<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>
https://mdbootstrap.com/javascript/material-select/#defaultashleyww93 commented 7 years ago
No, this gives you the browser default. I want the Material Design without css style without it changing how the control works.
ashleyww93 commented 7 years ago
Hi. Unfortunately not, I need a touchscreen friendly design (its why I purchased pro to support you), however when I do "$('.mdb-select').material_select();" many things like updating the selected option via javascript no longer work (They DO work with identical code with browser-default enabled). All I want is the Material Style without breaking standard HTML 5. Also, im hoping that this will fix my other issue of having the Select next to a prefix icon like so " " that also doesn't work correctly.
ashleyww93 commented 7 years ago
I can't right now as I don't have access to the source however, I can tell you this: If you do $("myMDBSelect").selectedIndex = 1; it does NOT update, this is a critical feature for me, and because I am using this in a tablet application that will change the selected indexes many times per minute, destroying and reinitialising the MDB select is not an option for me. Therefore all I want is the CSS used to make the Material Design Select, and use it without overriding the default properties of the HTML 5 select control. I don't need any of the additional features, just the design. For clarification, you can see it done here: https://codepen.io/jonnitto/details/OVmvPB with pure CSS (No javascript) this is exactly what I want but with the MDB style, not some other package. I hope this helps you fix my issue.
Hi,
Now, I can only provide you this select without JS:
CSS:
.md-select {
background-color: transparent;
border: none;
border-bottom: 1px solid #bdbdbd;
border-radius: 0;
outline: 0;
height: 2.1rem;
width: 100%;
font-size: 1rem;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.md-select:active {
border-bottom: 1px solid #4285F4;
-webkit-box-shadow: 0 1px 0 0 #4285F4;
box-shadow: 0 1px 0 0 #4285F4;
}
HTML:
<div class="md-form mt-5"> <select name="options" id="select" class="browser-default md-select form-control"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> </select> <label class="active" for="form6">Choose your option</label> </div>
Also, this our pretty material select needs javascript code and we can't recreate it in 100% pure CSS now.
Best,
Marta
ashleyww93 commented 7 years ago
This is very close to perfect! Thank you. As you can see in this screenshot: https://imgur.com/a/VdR44 The label isn't positioned correctly, and the doesn't respect the prefix icon. Please advise.ashleyww93 commented 7 years ago
Actually, in my case, the label isn't needed. I just need the icon space to be respected.Marta Szymanska commented 7 years ago
Paste here or send to my e-mail (m.szymanska@mdbootstrap.com) the code of this form that you have taken a screenshot of.
.md-form .prefix ~ select {
margin-left: 3rem;
width: 92%;
width: -webkit-calc(100% - 3rem);
width: calc(100% - 3rem);
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No