0

I've tried all sorts of ways, many mentioned on Stackoverflow but have been unable to resolve this.

I'm trying to remove or replace some styles on the bootstrap select box I keep having trouble styling the placeholder and background text on the selected Item.

Specifically I want to turn off all the blue in the image below and set the placeholder to black with white color.

enter image description here

I also want to get rid of the blue in this picture. enter image description here

I think that it has something to do with Bootstrap styling things in JavaScript and overriding anything I do.

John Swaringen
  • 731
  • 4
  • 11
  • 29
  • I think you're going to need a plugin to achieve this - https://stackoverflow.com/questions/17740391/change-select-list-option-background-colour-on-hover-in-html – jhawes Sep 25 '17 at 21:08
  • post the code you have – mlegg Sep 25 '17 at 22:07
  • Possible duplicate of [Change Select List Option background colour on hover in html](https://stackoverflow.com/questions/17740391/change-select-list-option-background-colour-on-hover-in-html) – Vanity Slug - codidact.com Oct 02 '17 at 13:21

1 Answers1

1

You should try bootstrap-select. here is https://developer.snapappointments.com/bootstrap-select/ try below snippet.

Bootstrap-select works in all bootstrap css version

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>


<select class="selectpicker" data-live-search="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>
sanoj lawrence
  • 951
  • 5
  • 29
  • 69