How can I apply .mdb-select styles properly?

Question

The documentation from MDB has the following example:

<select class="mdb-select" multiple>
    <option value="" disabled selected>Choose your country</option>
    <option value="1">USA</option>
    <option value="2">Germany</option>
    <option value="3">France</option>
    <option value="4">Poland</option>
    <option value="5">Japan</option>
</select>

However, the stylesheet they link to has no .mdb-select class that I can find. What am I missing? I've tried their example in my own project, and can't get the style to apply.

The project already links the base bootstrap files (somewhere), and in my page I'm trying to reference MDB like so:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.4/css/mdb.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.4/js/mdb.min.js"></script>

It seems like they also use JS to make their selects work, have you included the JS too? — Luca Kiebel, Jan 09 '18 at 21:16

score 0 · Answer 1 · answered Jan 09 '18 at 21:33

That’s because the document doesn’t stylize that class; it’s just there to be editable by the jQuery code. I looked at the jQuery code on the document and you can see the $(“.mdb-select”) in the jQuery portion of the document. You can stylize the element by adding a .css() after the .material_select () In the code and add your styles in between the ()s. Hope I helped you out!

score 0 · Answer 2 · edited Jan 22 '20 at 16:19

0

This class is a component of MDB pro version so if you want to use this component you'll have to purchase the pro version. Also, after purchasing, you have to initialize the component using JavaScript.

edited Jan 22 '20 at 16:19

djs

3,947
3
14
28

answered Jan 22 '20 at 15:48

rajeev

1

1

Any way you could include the initialization code in your answer to make it a little more thorough? – djs Jan 22 '20 at 16:22

How can I apply .mdb-select styles properly?

2 Answers2