css - customize dropdown button on inputfield

Question

I am required to make an input field that has an autocomplete functionality and they want a custom kind of button that shows that the input field is something different than just an input field.

but I can't seem to customize the class -ms-expand because all my css gets ignored. as you can see, it has display:none; but it still displays.

.input, .input2{
  -webkit-appearance: menulist;
  -moz-appearance:menulist;
}

.input::-ms-expand{
   display:none;
   color:green;
   background-color:red;
   border-left:1px solid black;
}
    
.input2::-ms-expand{
   float:left;
   color:red;
   background-color:green;
   border-right:1px solid black;
}

<input id="input" class="input" />
<input id="input2" class="input2" />

Possible duplicate of [How to style a – Domenik Reitzner Sep 03 '18 at 12:31 — Domenik Reitzner, Sep 03 '18 at 12:31

score 0 · Answer 1 · answered Sep 03 '18 at 12:31

0

I think you might have another css File in the directory which oversteers the one you're editing. Did you check that?

answered Sep 03 '18 at 12:31

Joel

1

yeah, i searched the whole solution for `::-ms-expand` and got only 1 result (this one) – FllnAngl Sep 03 '18 at 12:34

score 0 · Answer 2 · answered Sep 03 '18 at 12:37

0

Your problem is you are trying to attach styles to a class with pseudo element. You should in fact just style it normally using the class names.

.input {
  display: none;
}

.input2 {
  background: red;
}

Link for your reference: https://codepen.io/Harsh89/pen/VGbmVg

I would suggest to not use -ms-expand though, there are other alternatives. https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-expand

answered Sep 03 '18 at 12:37

Harsh

1,665
1
10
16

but this changes the background of the inputfield to red, which I don't want.. I only want that little "triangle arrow" to turn red – FllnAngl Sep 03 '18 at 12:39
Got it. In that case, alas there is no other way because it is browser rendered. I have done it earlier by adding an image inside the input box or select box. That is much easier, simpler and preferred way of doing it. – Harsh Sep 03 '18 at 12:50
yeah I wanted to do that too but I don't have an img of what my superiors want laying around haha. but right now I'm working on just making the input thinner and placing a div beside it to edit that as a button :P – FllnAngl Sep 03 '18 at 12:56
haha work it out with your superiors. I would suggest a better option to use any icon which looks good. You can use fontawesome. – Harsh Sep 03 '18 at 12:57
1

yeah apparently (this app's style is based on the main app) they also do what I am now doing in that app.. so apparently this is the way to dit it. And this question has become useless :P – FllnAngl Sep 03 '18 at 13:21

css - customize dropdown button on inputfield

2 Answers2