hola, tengo esta foto: ingrese la descripción de la imagen aquí
quiero hacer una opción de selección con el mismo estilo
<div class="name"> <input class="input1"type="name" required> <label class="label1">First name</label> </div> .label1{ position: relative; color: #555; font-size: 15px; pointer-events: none; right: 15px; top: -28px; transition: .2s all; } .input1:focus ~.label1, .input1:valid ~ .label1{ top: -49px; right: 9px; background: #fff; padding: 0 5px; font-size: 10px; color: #1f52f9; } .input1{ outline: none; border: 1px solid #9c9c9c; border-radius: 5px; padding: 0 10px; height: 35px; font-size: 15px; } .input1:focus{ border: 1.5px solid #1f52f9; } .input1[type="name"]{ display: block; margin: 30px 0 0 10px; } .input1[type="username"]{ display: block; width: 390px; margin: 10px 0 0 10px; } .input1[type="submit"]{ background: #4971f6; color: #fff; border: none; padding:10px 30px; border-radius: 5px; margin: 40px 0 30px 180px; cursor: pointer; font-size: 15px; } .input1[type="submit"]:hover{ background: #254fdb; }entonces quiero hacer con el mismo estilo, lo que significa que cuando presiono dentro de la selección (el marcador de posición se mueve hacia el borde y luego abre las opciones)
+ selector, .field .input:focus+.label .field .input:active+.label . focus y active son dos estados para la entrada. Para obtener más información acerca de visita plus selector .field en positon:relative y creamos la label positon:absolute . Al ver otros cs para backgroubd-color y top right podemos lograrlo fácilmente. .field { position: relative; display: inline-block; margin: 10px 0; } .field .input { line-height: 20px; background: transparent; position: relative; text-align: right; border-radius: 4px; } .field .input:focus, .input:active { border-color: blue; outline: blue; line-height: 28px; } .field .label { position: absolute; right: 2px; z-index: -1; } .field .input:focus+.label, .field .input:active+.label { z-index: 1; background-color: white; color: blue; top: -8px; padding: 0 4px; } <div class="field"> <input class="input" type="name" required> <label class="label">First name</label> </div>En primer lugar, hay un montón de bibliotecas entre las que puede elegir, que proporcionan componentes/elementos listos para usar. En segundo lugar, si necesita abrir un menú desplegable, debería echar un vistazo a la etiqueta <select> en html, en la que puede proporcionar varias etiquetas <option> , entre las que el usuario puede elegir.