Creating a custom dropdown using html

General
1

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

<style>
 
:root {
    --myHighlight:url('');
}
 

   
.filled { 
    white-space:normal;
      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;
}
 
</style>

<script>
$('.vibrate').on('click', function() {
  navigator.vibrate(80);
});
 
$('.touched').on('mousedown', function() {
$(this).addClass('highlight');
setTimeout(() => $(this).removeClass('highlight'), 100);
});
     
$('.touched-image').on('mousedown', function() {
$(this).addClass('highlight-image');
setTimeout(() => $(this).removeClass('highlight-image'), 200);
});
     
</script>

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

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

2

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.