Hi there can anyone help me how can I change the color of this arrow on select without changing the color of the text, I don't want to add an image of arrow I simply need to change this color nothing else
select.dropdowni{ color: red; }<select class="btn btn-default dropdown-toggle dropdowni" name="{{ $question->id }}[]"> <ul class="dropdown-menu"> <option value="{{ $option->id }}">Test</option> </ul> </select>You can try something like this.
<!DOCTYPE html> <html> <style> .select_div{ overflow: hidden; border: 1px solid #000; position: relative; padding: 10px 0; } .select_div:after{ width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #f00; position: absolute; top: 40%; right: 5px; content: ""; z-index: 98; } .select_div select{ width: 110%; border: 0; position: relative; z-index: 99; background: none; } </style> <body> <div class="select_div"> <select> <option>Test This Select</option> <option>Test This Select</option> </select> </div> </body> </html> 