Limit the text in the div, but make the whole div clickable

Question

I have this styled-select which I made for my requirements. Now the problem is that if the selected option is larger than the whole area, naturally it will fill the whole div as shown in the picture below:

Now I want it to be limited or have a margin on the right, in order to show the arrow which I used as background: url , like the picture below:

If I decrease the width of the div it will be ok, but the problem is that it won't be clickable in order to open the dropdown menu. Now I want to know if there is a solution to limit the text but still have the clickable area as well?

Here is my code: Working jsFiddle

 $(function() { $('.styled-select select').hide(); $("select#elem").val('0'); $('.styled-select div').each(function() { var $container = $(this).closest('.styled-select'); $(this).html($container.find('select option:selected').text()); }); $('.styled-select div').click(function() { var $container = $(this).closest('.styled-select'); var opLen = $container.find('select').children('option').length; if (opLen < 5) { $container.find('select').show().attr('size', opLen).focus(); } else { $container.find('select').show().attr('size', 5).focus(); } }); $('.styled-select select').click(function() { var $container = $(this).closest('.styled-select'); var text = $container.find('select option:selected').text(); $container.find('div').html(text); $container.find('select').hide(); }); $('.styled-select select').focusout(function() { var $container = $(this).closest('.styled-select'); $container.find('select').hide(); }); }); 

 .styled-select select { position: absolute; background: transparent; width: 420px; padding-top: 5px; font-size: 18px; font-family: 'PT Sans', sans-serif; color: black; border: 0; border-radius: 4; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; z-index: 1; outline: none; top: 42px; box-shadow: 0 2px 2px 0 #C2C2C2; } .styled-select { background: url('http://s22.postimg.org/f5gjjtswd/campaign_Selector.png') no-repeat right; background-color: white; width: 420px; height: 42px; position: relative; margin: 0 auto; box-shadow: 0 2px 2px 0 #C2C2C2; background-position: 97% 50%; } .styled-select option { font-size: 18px; background-color: white; margin-left: 3px; } 

 <div class="styled-select" style="width: 301px; margin:5px 0 0 10px;"> <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <div id="userChannelDivId" style="font-size:18px; position: absolute; top: 8px; left: 5px; width: 295px; height: 42px; white-space:nowrap; overflow:hidden"></div> <select id="userChannelId" name="userChannelId" style="width:100%"> <option value="">resh resh reshadreshadreshadreshadreshad resh</option> <option value="">--- Select ---</option> <option value="">--- Celect ---</option> <option value="">--- Delect ---</option> <option value="">--- Felect ---</option> <option value="">--- Gelect ---</option> </select> </div> 

Answer 1

changes to the #UserChannelDivID ...

width: 265px;
text-overflow: ellipsis; 
padding: 0 30px 0 0;

Fiddle

Answer 2

You can resize the div and then apply a transparent border that will extend the container over the tick.

As such:

#userChannelDivId {
  width: 250px !important;
  border-right: 45px solid transparent;
}

does the trick.

https://jsfiddle.net/qyf22h83/13/

Answer 3

CSS Only Solution

Based on select-css Github repo, here is a CSS-only solution. No need for fancy JavaScript when the HTML select tag provides all the functionality. This solution replaces the drop-down arrow. Wrap select in custom-select div and add the CSS. Replace the drop-down arrow definition with your own.

https://jsfiddle.net/sacwebdeveloper/ctchr3ph/

 /* Container used for styling the custom select, the buttom class below adds the * bg gradient, corners, etc. */ .custom-select { position: relative; display: block; } /* This is the native select, we're making everything but the text invisible so * we can see the button styles in the wrapper */ .custom-select select { width: 100%; margin: 0; outline: none; padding: .6em .8em .5em .8em; /* Prefixed box-sizing rules necessary for older browsers */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* Font size must be 16px to prevent iOS page zoom on focus */ font-size: 16px; } /* Custom arrow sits on top of the select - could be an image, SVG, icon font, * etc. or the arrow could just baked into the bg image on the select. */ .custom-select::after { content: " "; position: absolute; top: 50%; right: 1em; z-index: 2; /* These hacks make the select behind the arrow clickable in some browsers */ pointer-events: none; display: none; } .custom-select::after { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid #666; margin-top: -3px; } @supports ( -webkit-appearance: none ) or ( appearance: none ) /* Firefox <= 34 has a false positive on @supports( -moz-appearance: none ) * @supports ( mask-type: alpha ) is Firefox 35+ */ or ( ( -moz-appearance: none ) and ( mask-type: alpha ) ) { /* Show custom arrow */ .custom-select::after { display: block; } /* Remove select styling */ .custom-select select { padding-right: 2em; /* Match-01 */ /* inside @supports so that iOS <= 8 display the native arrow */ background: none; /* Match-04 */ /* inside @supports so that Android <= 4.3 display the native arrow */ border: 1px solid transparent; /* Match-05 */ -webkit-appearance: none; -moz-appearance: none; appearance: none; } .custom-select select:focus { border-color: #aaa; /* Match-03 */ } } .custom-select { background-color: white; margin-top: 40px; } 

 <div class="custom-select"> <select id="userChannelId" name="userChannelId"> <option value="">resh resh reshadreshadreshadreshadreshad resh</option> <option value="">--- Select ---</option> <option value="">--- Celect ---</option> <option value="">--- Delect ---</option> <option value="">--- Felect ---</option> <option value="">--- Gelect ---</option> </select> </div> 

Answer 4

Here's a javascript alternative using substring that would also append an ellipsis (the 3 ...) to indicate this there is more to this value than is being displayed. You can change the range to whatever you like, I just set it to 20 characters.

   $('.styled-select div').each(function() {
       var $container = $(this).closest('.styled-select');
       var value = $container.find('select option:selected').text();
       value = value.substring(0, 20) + '...';
       $(this).html(value);
   });