Supongamos que tengo un botón desplegable que se parece a la imagen de arriba.

Cuando hago clic en este menú desplegable, se ve así:

Observe cómo el símbolo de intercalación "v" todavía está invertido.

Quiero que el símbolo de intercalación sea "^" en su lugar.

Aquí está el código que tengo hasta ahora.

 <div class="dropdown"> <button id="num-of-results-btn" data-target="#myDropdown" class="dropbtn">30 results</button> <div id="myDropdown" class="dropdown-content"> <a href="">10 results</a> <a href="">20 results</a> <a href="">30 results</a> </div> </div>

He copiado este fragmento de código del enlace

"https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown"

Desde el enlace de arriba, no hay ningún símbolo de intercalación en absoluto.

Pero cuando copio ese código en mi proyecto, de repente aparece el símbolo de intercalación.

Entonces, ¿cómo puedo ubicar ese símbolo de intercalación y manipularlo de la manera que describí anteriormente?

Agradecería cualquier sugerencia o sugerencia que pueda llevarme en la dirección correcta.

Aquí está el CSS que estoy aplicando a este código.

 .dropbtn{ height: 48px; width: 200px; padding: 0; margin: 0; text-align: start; padding-left: 1rem; background: white; border: 1px solid #D6D6D6; border-radius: 4px; font-weight: bold; font-size: 16px; line-height: 24px; } .dropbtn:hover, .dropbtn:focus { background-color: lightskyblue; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: white; width: 198px; overflow: auto; border: 1px solid #D6D6D6; border-radius: 4px; font-weight: bold; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }

Además, mi proyecto incluye bootstrap4.