La etiqueta flotante funciona cuando el campo es obligatorio. Cuando elimino el atributo requerido de la etiqueta de entrada, deja de funcionar.
div{ margin-top:40px; } .btn-add input[type="text"]{ width: 90%; padding: 10px 20px 0 20px; border: none; border-bottom:1px solid #999; font-size: 140%; color: #000; } .btn-add input:focus ~ .floating-label, .btn-add input:not(:focus):valid ~ .floating-label{ top: -20px; bottom: 10px; left: 10px; font-size: 20px; opacity: 1; color: rgb(100, 6, 6); } .btn-add-link input[type="url"]{ width: 90%; padding: 10px 20px 0 20px; border: none; border-bottom:1px solid #999; font-size: 140%; color: #000; } .btn-add-link input:focus ~ .floating-label, .btn-add-link input:not(:placeholder-shown)~.floating-label, .btn-add-link input:not(:focus):valid ~ .floating-label{ top: -20px; bottom: 10px; left: 10px; font-size: 20px; opacity: 1; color: rgb(100, 6, 6); } .floating-label { position: absolute; pointer-events: none; left: 20px; top:10px; transition: 0.2s ease all; color: #999999; font-size: 120%; } .form-float{ position: relative; } <div class="form-float btn-add"> <input type="text" class="inputText" > <label class="floating-label">Button text</label> </div>No quiero este campo como campo obligatorio, ¿cómo puedo solucionarlo? ¿Cómo puedo hacer que la etiqueta flotante funcione sin que se requiera una entrada?
El selector input:focus selecciona la entrada cuando obtiene el foco y el selector input:not(:focus):valid la selecciona si es una entrada válida pero no está enfocada. Como no desea que el campo de entrada se complete necesariamente, debe eliminar:
input:not(:focus):valid~.floating-label