CODEWITHSUNDEEP
javascripthtmlcss
user3861559
user3861559

Reputation: 993

replacing <select> aroow with a custom image and make it open dropdown

I have a drop down in my page. I disabled the default arrow that comes with the select and over layed it with the my custom arrow ( icon font). The issue I am facing now is when I click on my custom arrow, the drop down doesn't open up. Is there a way to get it working.

enter image description here

HTML mark up:

<span class="drop-down-arrow"></span>
    <select name="" id="subject" class="applicationDropDown">
            <option value="Option 1">O[tion 1</option>
            <option value="O[tion 2">O[tion 2</option>
            <option value="Other">Other</option>
    </select>

CSS code:

select{
    -webkit-appearance: none;
    -moz-appearance: none;
}

.applicationDropDown{
    background:#e6e6e6;
    color:#989898;
    @include rem-px(font-size,(16px));
    @include rem-px(height,(50px));
    max-height:200px;
    overflow-y:scroll;
    outline : none;
    transition: none;
}

span.drop-down-arrow{       
    background: #a4cf53;
    display: block;
    float: right;
    @include rem-px(height,(50px));
    @include rem-px(width,(40px));
    position:relative;
    @include rem-px(right,(1px));
    @include rem-px(top,(50px));



    &:after{
        clear: both;
        content: "\e669";
        color:#fff;
        font-family:icons;
        @include rem-px(font-size,(13px));
        display: block;
        float: right;
        height: 0;
        position: relative;
        @include rem-px(right,(7px));
        @include rem-px(top,(21px));
        }
}

Upvotes: 0

Views: 2328

Answers (2)

user4333726
user4333726

Reputation: 36

you can use 'pointer-events:none;' css property in that arrow(please check browser copatibility bellow IE8)

eg:

<div class="wrapper">
<span class="drop-down-arrow"></span>
    <select name="" id="subject" class="applicationDropDown">
            <option value="Option 1">O[tion 1</option>
            <option value="O[tion 2">O[tion 2</option>
            <option value="Other">Other</option>
    </select>
</div>

Css:

.wrapper{
    position:relative;
    float:left;
}
select{
    -webkit-appearance: none;
    -moz-appearance: none;
}
.applicationDropDown{
    background:#e6e6e6;
    color:#989898;
    @include rem-px(font-size,(16px));
    @include rem-px(height,(50px));
    max-height:200px;
    overflow-y:scroll;
    outline : none;
    transition: none;
}
span.drop-down-arrow{       
    background: #a4cf53;
    display: block;
    position:absolute;
    width:20px;
    height:20px;
    pointer-events:none;
    right:0;
    top:0;
    z-index:999;
}

Link: http://jsfiddle.net/Halloween81/4p3uaeba/

Upvotes: 2

Liftoff
Liftoff

Reputation: 25372

Using the browser's built-in <select> element, this is simply not possible at the moment. There are not many well-known and accepted functions (in fact, I can't think of a single one) in Javascript or jQuery that will allow you to force the open of a <select> element on every operating system and browser.

However, that is not to say that you can't make your own drop-down element to do this.

Upvotes: 0

Related Questions