Estilo bootstrap-select “marcador de posición” de manera diferente

Solución:

La cosa es – bootstrap-select reemplaza <select> para <button> yoption> a <a>.

Eso hace que su código sea problemático por dos razones:

1. Estás intentando (y probablemente, teniendo éxito) de estilo oculto elementos (como option y select se ocultan tan pronto como se inicia el selector de selección).
2. Te estás uniendo a document.ready en lugar de la inicialización de bootstrap select.

Use CSS para establecer el estilo de los elementos nuevos en lugar de los antiguos:

a.placeholder, button.bs-placeholder {
  font-style: italic !important;
  color: #636c72;
}

HTML (tenga en cuenta que bs-placeholder class está lista para usar para bootstrap-select cuando no tiene un valor, no es necesario agregarlo):

<select required class="form-control selectpicker" id="medFilter" name="medFilter" title="Select Med">
      <option class="placeholder" selected value="">Search Med</option>
      <option value="med-1">Med 1</option>
      <option value="med-2">Med 2</option>
</select>

Siempre que se pueda archivar con CSS, me desharía de la document.ready enfoque de estilo.

Plunkr: https://plnkr.co/edit/EAbTMz1WQnFWwtLsmYbZ?p=preview

$('select[name=medFilter] option:eq(1)')

use este selector y aplique su código css a esto y configúrelo como marcador de posición.

Esto siempre seleccionará el n-ésimo elemento (lo que ha pasado en la opción: eq (1))

Espero que esto funcione. 🙂

Puede hacer todo esto con CSS puro, será más manejable que hacerlo con js. los siguientes estilizan la entrada en cursiva y con un color diferente si la opción seleccionada es la primera.

He dado dos ejemplos, uno con inhabilitado y oculto, y otro sin atributos inhabilitados y ocultos.

select option {
  color: #000000;
  font-style: normal;
}

select:invalid, select option[value=""] {
  color: red; /* Or any color you want */
  font-style: italic;
}

.form-control {
  margin: 20px 0px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" />

<select required class="form-control selectpicker" id="medFilter" name="medFilter" title="Select Med">
  <option selected value="">Search Med</option>
  <option value="med-1">Med 1</option>
  <option value="med-2">Med 2</option>
  </option>
</select>
<select required class="form-control selectpicker" id="medFilter2" name="medFilter2" title="Select Med 2">
  <option selected disabled hidden value="">Search Med - Another</option>
  <option value="med-1">Med 1</option>
  <option value="med-2">Med 2</option>
  </option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

---

---

Utiliza Nuestro Buscador