¿Cómo hacer una flecha arriba/abajo en el campo de entrada seleccionado en CSS?

8 minutos de lectura

avatar de usuario
Juan

estoy trabajando en un sitio web (construido en WordPress, tema personalizado) en el que quiero añadir flecha arriba/abajo en el campo de entrada de selección en CSS. El código HTML que estoy usando para crear una flecha arriba/abajo para el campo de entrada seleccionado es:

<p>
   <select name="filter_31" id="search-box-filter_31">
      <option value="Vancouver Island University">University of A</option>
      <option value="Western University">University of B</option>
      <option value="Wilfrid Laurier University">University of C</option>
      <option value="York University">University of D</option>
   </select>
</p>

Aquí está el violín completo https://jsfiddle.net/ovp8Lxjw/4/embedded/result para el código anterior. En este momento, solo tiene flecha hacia abajo.

En el violín anterior, quiero agregar ambas flechas arriba/abajo de color azul. En este momento, solo muestra la flecha hacia abajo.

Planteamiento del problema:

Me pregunto qué código CSS necesito agregar en el violín anterior para poder ver flecha arriba/abajo (como se muestra en la siguiente captura de pantalla, marcada con una flecha) en el campo de entrada seleccionado en css. No puedo hacer ningún cambio en el código HTML, ya que proviene de la inspección de wordpress. sitio web.

ingrese la descripción de la imagen aquí

  • stackoverflow.com/questions/14218307/select-arrow-style-change Esto le ayudará

    – Vash72

    29/09/2018 a las 21:57

  • @Francesco Fortin No ayudó mucho. Necesito hacer una flecha arriba/abajo en el campo de entrada seleccionado en css. La pregunta anterior tiene solo una flecha hacia abajo.

    – Juan

    30 de septiembre de 2018 a las 2:54

  • La captura de pantalla que publicaste es de OSX, ¿y quieres que también muestre la misma flecha arriba/abajo en otros sistemas operativos como Windows? @FrancescoFortin parece correcto, pero debe proporcionar su imagen para tener la flecha hacia arriba y hacia abajo allí.

    – Arcilla

    2 de octubre de 2018 a las 0:25

avatar de usuario
jla

El navegador dibuja el icono de flecha de selección predeterminado. No hay una API para que le diga al navegador que reemplace el ícono de la flecha, por lo que deberá cambiar el estilo del elemento seleccionado y superponer sus propias flechas. Puede dibujar sus propias flechas que tengan un estilo idéntico al de las flechas de su navegador, pero recuerde que el ícono predeterminado será diferente para otros navegadores y sistemas operativos.

Para cambiar el estilo del elemento seleccionado usando solo CSS, deberá apuntar tanto a la selección como a su padre p elemento. La selección tiene una identificación, que es fácil de orientar, pero se dirige a ese específico p El elemento no es fácil solo con el código que ha proporcionado. Sin embargo, al mirar el enlace del sitio de WordPress provisto, hay una etiqueta justo antes del pde la forma <label for="search-box-filter_31">Name of Institution</label>. Esto significa que el p el elemento puede orientarse mediante el selector de CSS label[for=search-box-filter_31] + p.

Primero debe asegurarse de tener suficiente espacio para su nueva flecha. Esto se logra aumentando el ancho de la selección por el ancho de sus nuevas flechas y agregando la misma cantidad al padre pEs el acolchado derecho. Una forma de cambiar el ancho de la selección es usando calc(100% + 30px). Si sus nuevas flechas tienen el mismo ancho que los íconos predeterminados, es posible que no necesite hacer esto, pero en algunas configuraciones sus flechas pueden superponerse al contenido de la selección.

Además el p el elemento debe encogerse para ajustarse a su contenido. Hay algunas formas de hacer esto, pero en su situación, la que tiene menos probabilidades de romper el formato es configurar display: table.

Por último, puede utilizar el ::after pseudo elemento en p para crear las flechas deseadas y superponerlas al final de su elemento seleccionado, ocultando la flecha predeterminada. En el siguiente ejemplo, creé las flechas con SVG en línea, pero puede usar cualquier imagen de fondo que mejor se adapte a su situación. Selecciona el ::after elemento a tener position:absolute y dale estilo para que encaje exactamente sobre el lado derecho de la selección. Para crear el fondo degradado azul debajo de las flechas que tiene en su imagen, use varios fondos, siendo el primero sus flechas y el segundo un degradado CSS.

Tenga en cuenta que desde el ::after está en la parte superior de la selección, al hacer clic en las flechas no se mostrarán las opciones. Puedes configurar pointer-events: none; para pasar los clics, pero esto no funcionará en IE.

El CSS está debajo, o alternativamente puede verlo en el codepen https://codepen.io/jla-/pen/ZqbWMj

#search-box-filter_31 {
    width: calc(100% + 30px);
}
label[for=search-box-filter_31] + p {
    position: relative;
    display: table;
    border-radius: 5px;
    padding-right: 30px;
}
label[for=search-box-filter_31] + p::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 30px;
    border-radius: 0 5px 5px 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"><polyline points="8,12,15,8,22,12" fill="none" style="stroke:white;stroke-width:2"/><polyline points="8,18,15,22,22,18" fill="none" style="stroke:white;stroke-width:2"/></svg>"),
        linear-gradient(to bottom, #a0d8ff 0%, #2591dd 100%);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

El resultado (seguido por la selección predeterminada tal como aparece en Firefox en Linux):

ingrese la descripción de la imagen aquí

Por supuesto, las flechas y su fondo azul se pueden diseñar de cualquier otra forma que desee. Tenga en cuenta que agregar un estilo personalizado a las flechas de selección hará que se vea diferente al estilo del navegador predeterminado. Puede diseñarlo para que encaje perfectamente en un navegador, por ejemplo, Chrome, pero otro navegador, por ejemplo, Firefox, mostrará las cosas de manera diferente y su estilo personalizado no coincidirá. Para tener una apariencia perfecta en todos los navegadores y sistemas operativos, debe asegurarse de que todos los elementos de selección/entrada tengan un estilo que coincida entre sí.

Este es un ejemplo simple y directo que usa un ícono Font Awesome codificado en base64 como imagen de fondo para el cuadro de selección.

select {
  background-color: white;
  border: thin solid grey;
  border-radius: 4px;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}
select.arrows {
  background-image:    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAA3klEQVRIS+3VMU9CMRTF8d8zBL+aizoQFhx0kUk33RzdYMNFXUFnYeGrYYyaJiUxJHDLSxodbNKpfeffc9/pbaPyaCrr+3OA++z4rtT5Pg5GuMnCY9yWQEoBE1xhlUUP8YDrCBIB0vojLvGO0yz4hm4JJAKcYYoPHGOZAUdYoIMBXrc5iQAHeMlzviFygj7O8dkWEJU4XI8chALRhn9AVKHf70VRTHu4wFfbmKZLNKt50dLBnna0imcMd/2I0phWa3Y/D1e1Xa9BCZJG0VuQNpaWKMx72xS1Fl5/WN3BN+AgJhnZQlq4AAAAAElFTkSuQmCC');
  background-position: calc(100% - .5rem), 100% 0;
  background-size:  1.5em 1.5em;
  background-repeat: no-repeat;
}

select.arrows:focus {
  border-color: blue;
  outline: 0;
}
<p>
  <select class="arrows">
      <option value="Vancouver Island University">Vancouver Island University</option>
      <option value="Western University">Western University</option>
      <option value="Wilfrid Laurier University">Wilfrid Laurier University</option>
      <option value="York University">York University</option>
   </select>
</p>

Puedes comprobar esto en jsviolín

Además un enlace a Aplicación Icomoonutilizado para crear la imagen png del icono utilizado.

  • Comprobación. Manténganse al tanto.

    – Juan

    7 oct 2018 a las 18:32

  • @john, creo que no tendrás ningún problema. Se verá igual en la mayoría de los navegadores, si no en todos. Se verificó en Edge, FF, Opera y Chrome (para escritorio Win).

    usuario2560539

    7 oct 2018 a las 18:34

  • He aceptado tu respuesta. Creo que funcionó. He otorgado la recompensa también. Tengo una pregunta similar más. Me pregunto si puedes echar un vistazo. Es algo relacionado con el plugin de wordpress css. Estoy atascado en esto desde las últimas 24 horas.

    – Juan

    7 oct 2018 a las 18:35


Yo usaría el selector after: en el elemento p.

p:after{
content: url("path/to/image");
} 

  • Tenemos opciones limitadas ya que no podemos cambiar el html. La única opción que queda es css.

    – Juan

    30 de septiembre de 2018 a las 3:27

  • El ejemplo que publiqué es CSS.

    – Pozos Dhul

    30 de septiembre de 2018 a las 3:28

  • Si lo se. solo estoy diciendo

    – Juan

    30 de septiembre de 2018 a las 3:28

  • Estás usando una imagen para las flechas, ¿correcto? Esto definitivamente debería funcionar para ti.

    – Pozos Dhul

    30 de septiembre de 2018 a las 3:30

  • Todo eso viene de formularios de wordpress. No estoy usando nada.

    – Juan

    30 de septiembre de 2018 a las 3:31

La solución para CSS / HTML puro está disponible, pero funciona a través del truco cuando extendemos la altura hasta el tamaño html = “2” y luego la estrechamos nuevamente a través de la altura:

<p>
   <select name="filter_31" id="search-box-filter_31" size="2" style="font-size:16px; height:24px;">
      <option value="Vancouver Island University">University of Arizona</option>
      <option value="Western University">University of B</option>
      <option value="Wilfrid Laurier University">University of C</option>
      <option value="York University">University of D</option>
   </select>
</p>

Pero no escribiría un código de este tipo para un proyecto de trabajo, sino que es mejor usar la biblioteca js, por ejemplo:
https://github.hubspot.com/select/docs/welcome/

avatar de usuario
Mohan Wijesena

Puede ser que esto te consuele un poco cuando dices que no puedes tocar el HTML. ¡Estaba jugando con CSS!

#search-box-filter_32 {
            background-color: white !important;
            font-size: 11px !important;
            background: url('https://cdn3.iconfinder.com/data/icons/trico-arrows-1/24/ExpandUpDownSmall-512.png') no-repeat right #ddd;
            background-position: 98%;
            padding: 2px 20px 2px 8px;
            padding-right: 20px;
            background-size: 14px;
            -moz-appearance: none;
            -o-appearance: none;
            -ms-appearance: none;
            -webkit-appearance: none;
            outline: none !important;
            -webkit-border-radius: 4px;
            border: 1px  solid #cccccc;
        }

https://codepen.io/mohan-wijesena/pen/dgMBLY

¿Ha sido útil esta solución?