Creating a custom dropdown using html

I created a custom HTML custom button using a template mode it works great

now I want to do the same thing but with a dropdown selection

here s the HTML code I used for the button

:root {

.filled { 
      height: 100% !important;
      width: 100% !important;
      padding: 0 !important;
      margin: 0px !important;
      //background-color: transparent !important;
.nr-dashboard-template {
      padding: 0;
      margin: 0;
.rounded {
    border-radius: 3px;
    font-size: 11px !important;
    padding: 4px !important;
.highlight {
    background-color: black !important;
.images {
    background-size: 100% 100%;
    background-repeat: no-repeat; 
.highlight-image {
    background-image: var(--myHighlight) !important;

$('.vibrate').on('click', function() {
$('.touched').on('mousedown', function() {
setTimeout(() => $(this).removeClass('highlight'), 100);
$('.touched-image').on('mousedown', function() {
setTimeout(() => $(this).removeClass('highlight-image'), 200);

<md-button class="vibrate filled touched rounded"
    ng-click="send({payload: 'A'})"> 
    bedroom lights

this is the type of dropdown I want to create here is the link I don't need it to bed multi-select I just want to have it when I select an option it outputs that value to msg.payload

I just need to style my own dropdown and have the output go to msg.payload