Once i click on label select button should get open

Question

i want to open select button if i click on label ,

here is the code

<label>sachin</label>
<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

is there any way in css or jquery ? i am not sure about this thing.

fiddle :http://jsfiddle.net/Yh3Jf/

For now, we can't. The best solution will be to use jQuery dropdownlist to create your own dropdown list. Goto http://stackoverflow.com/questions/360431/can-i-open-a-dropdownlist-using-jquery Here there is some plugins which can help you http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/ — JoDev, Mar 06 '13 at 14:32
I don't think it's possible. You can *focus* the select with the label, but it won't expand. I think that's up to the OS. — Explosion Pills, Mar 06 '13 at 14:33

score 20 · Answer 1 · answered Sep 20 '15 at 11:45

20

No need for javascript here, just style it with CSS and use pointer events :

<label>
<select>
   <option value="0">Zero</option>
   <option value="1">One</option>
</select>
</label>

and the relative CSS is

label:after {
    content:'\25BC';
    display:inline-block;
    color:#000;
    background-color:#fff;
    margin-left:-17px;   /* remove the damn :after space */
    pointer-events:none; /* let the click pass trough */
}

Here is a ugly fiddle sample: https://jsfiddle.net/1rofzz89/

answered Sep 20 '15 at 11:45

Dario Corno

1,129
11
19

3

this is awesome answer with no jQuery hacks – Gags Apr 29 '16 at 04:57
`pointer-events:none;` can solve a lot of problems, thanks for that. – run_the_race Aug 15 '21 at 15:12

score 7 · Answer 2 · answered Aug 17 '13 at 03:48

Wrong guys; to get the native selection-list just make a invisible clone under the mouse:

$("label").mouseover(function(){
    var $this = $(this);
    var $input = $('#' + $(this).attr('for')); 
    if ($input.is("select") && !$('.lfClon').length) {
        var $clon = $input.clone();
        var getRules = function($ele){ return {
            position: 'absolute',
            left: $ele.offset().left,
            top: $ele.offset().top,
            width: $ele.outerWidth(),
            height: $ele.outerHeight(),
            opacity: 0,
            margin: 0,
            padding: 0
        };};
        var rules = getRules($this);
        $clon.css(rules);
        $clon.on("mousedown.lf", function(){
            $clon.css({
                marginLeft: $input.offset().left - rules.left,
                marginTop: $input.offset().top - rules.top,
            });
            $clon.on('change blur', function(){
                $input.val($clon.val()).show();
                $clon.remove();
            });
            $clon.off('.lf');
        });
        $clon.on("mouseout.lf", function(){
            $(this).remove();
        });
        $clon.prop({id:'',className:'lfClon'});
        $clon.appendTo('body');
    }
});

Tested on IE10, Chrome 27 and Firefox 22

Demo: http://jsfiddle.net/Yh3Jf/24/

too aggressive, cloning a dom object has a lot of unexpected results — Ayyash, Apr 29 '17 at 17:13
What unexpected results @Ayyash? Obviously you should test everything still works after implementing it. Regardless, If you want a less "aggressive" way you can always duplicate the — Ivan Castellanos, May 01 '17 at 01:09
for example if you have another plugin to work with the same input, I remember I ran into a huge issue because my input file was attached to a plugin, my validation was cloning, (by using wrap()) and thus losing everything attached to the original element... in angular too if you do not clone in the right life cycle hook, you lose the control — Ayyash, May 01 '17 at 05:07

score 3 · Answer 3 · answered Mar 06 '13 at 14:32

3

If you are just trying to gain focus on the select box (thus allowing you to arrow up and down), you can use something like...

<label for="sel">sachin</label>
<select id="sel">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

answered Mar 06 '13 at 14:32

brbcoding

13,378
2
37
51

Not the original question is about opening the select, this is just about getting control – run_the_race Aug 15 '21 at 14:57

jmorc · Accepted Answer · 2013-03-06T15:00:08.997

3

Do you want to do something like this? http://jsfiddle.net/Yh3Jf/6/

    <label id="l">sachin</label>
    <select id="s">
        <option>1</option>
        <option>2</option>        
        <option>3</option>
        <option>4</option>
   </select>  

$("#l").click(function () {
    var size = $('#s option').size();
    if (size != $("#s").prop('size')) {
        $("#s").prop('size', size);
    } else {
        $("#s").prop('size', 1);
    }
})

edited Mar 06 '13 at 15:00

answered Mar 06 '13 at 14:49

jmorc

560
1
3
14

superb dude. Thats what i exactly want – supersaiyan Mar 07 '13 at 05:37
1

if `$('#s option').size();` causes error use: `$('#s option').length;` – Derzu Jan 31 '21 at 12:46

score 2 · Answer 5 · answered Jan 31 '21 at 22:51

In case someone else is searching for this, I did this behavior by expanding the padding of the <select> tag, and making the label positioned absolute.

<div class="field-select">
  <label class="field-select__label" for="selector">Clickable Label</label>
  <select class="field-select__input" id="selector" name="selector">
    <option value="val1">value 1 </option>
    </option><option value="val2">Value 2</option>
  </select>
</div>


.field-select {
  position: relative;
}

.field-select__label {
  position: absolute;
  pointer-events: none;
  top: 5px;
  left: 0;
}

.field-select__input {
  padding: 50px 50px 20px 10px;
}

Check working example on codepen

score 0 · Answer 6 · answered Mar 06 '13 at 14:32

Unfortunately it inst possible to use any kind of code to have the native select dropdown show up.

But i have seen people use a backgrond image and then the select pops up (check Mightydeals.com)

If not resolve to jquery and some html to produce the effect.

score 0 · Answer 7 · answered Jun 29 '23 at 07:33

0

had the same problem, my solution was in css with this line on the label : pointer-events: none; and it was alreadt with position: absolute;

answered Jun 29 '23 at 07:33

Matansaban

3
3

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 30 '23 at 20:31

Once i click on label select button should get open

7 Answers7

Linked