How to get the output in relative units instead px by modifying this jQuery plugin of making custom style dropdown?

Question

Scenario

I'm making a Responsive website where I need to give multiple sizes to dropdown for various screen sizes with custom styling

What I tried

i'm using this DropKick plugin to make custom styled dropdowns it adding width in px. it's very good for me

this is example I made using the plugin http://jsfiddle.net/jitendravyas/HtW8C/1/

Problem

I want to increase or decrease the width and height of dropdown by increasing or decreasing the size of font inside dropdown but when i increase the font-size, dropdown doesn't scale accordingly

Link of plugin https://raw.github.com/JamieLottering/DropKick/master/jquery.dropkick-1.0.0.js

Edit:

I changed px to em here https://github.com/JamieLottering/DropKick/blob/master/jquery.dropkick-1.0.0.js#L117

But this plugin adds a inline width which i don't want. I want to control width by CSS

Answer 1

This is a situation in which the CSS !important rule is actually useful and a valid solution:

a.dk_toggle { width: auto !important; }

This will let you change the font size and have it expand automatically. Or, you can set an explicit width of your choosing, as long as you use that !important rule.

Answer 2

What about when you need to target multiple dropdowns on a page with different widths?

How to individually target multiple dropdowns in CSS for Dropkick Plug-in