# Creating a custom dropdown using html

**URL:** <https://discourse.nodered.org/t/creating-a-custom-dropdown-using-html/38370>\
**Category:** General\
**Created:** [1 January 2021 20:25 UTC](https://discourse.nodered.org/t/creating-a-custom-dropdown-using-html/38370 "2021-01-01T20:25:50Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Zbrooklyn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zbrooklyn/32/34446_2.png) [@Zbrooklyn](https://discourse.nodered.org/u/Zbrooklyn)\
**Post date:** [1 January 2021 20:25 UTC](https://discourse.nodered.org/t/creating-a-custom-dropdown-using-html/38370/1 "2021-01-01T20:25:50Z")

</div>

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

```auto
<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

> **[Bootstrap select – Learn to use with 5 beautiful styles](https://www.jquery-az.com/boots/demo.php?ex=6.0_4)**
>
> The Bootstrap select – option The select – option dropdown can be added along with other form controls in Bootstrap forms by using built-in classes. You may use simple Bootstrap classes, customized CSS or third party add-ons to create beautiful...

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [2 March 2021 20:25 UTC](https://discourse.nodered.org/t/creating-a-custom-dropdown-using-html/38370/2 "2021-03-02T20:25:58Z")

</div>

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