Quiero que cuando un usuario venga e intente escribir texto en "entrada", la etiqueta suba, y si deja esa área en blanco, vuelva a la posición original. Si el usuario escribió algo allí, permanecerá allí.
Probé este código con el cuadro de entrada requerido, funciona bien, pero cuando trato de hacer esto con la entrada y agrego algo de contenido en la entrada, la etiqueta vuelve a bajar, debe permanecer allí.
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{ 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" placeholder="" > <label class="floating-label" >Button text</label> </div> input:not(:focus):valid~.floating-label para que pueda funcionar con un campo no requerido
Pruebe este código debido a que está ocurriendo el marcador de posición.
.form-group { position: relative; margin-bottom: 1.5rem; } input + .form-control-placeholder { position: absolute; transition: all 200ms; top: -20px; bottom: 10px; font-size: 20px; opacity: 1; color: rgb(100, 6, 6); } input:placeholder-shown + .form-control-placeholder { position: absolute; pointer-events: none; left: 20px; top:10px; transition: 0.2s ease all; color: #999999; font-size: 120%; } .form-control:focus + .form-control-placeholder { position: absolute; transition: all 200ms; top: -20px; bottom: 10px; font-size: 20px; opacity: 1; color: rgb(100, 6, 6); } input[type="text"]{ width: 90%; padding: 10px 20px 0 20px; border: none; border-bottom:1px solid #999; font-size: 140%; color: #000; } label{ position: absolute; pointer-events: none; left: 20px; top:10px; transition: 0.2s ease all; color: #999999; font-size: 120%; } <br> <br> <div class="form-group"> <input type="text" class="form-control" placeholder=" " > <label class="form-control-placeholder">Button text</label> </div>Agregue espacio a su marcador de posición de forma predeterminada y luego use la propiedad input:not(:placeholder-shown) para verificar si la entrada está vacía o no. Aquí ejemplo de trabajo de su código
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{ top: -20px; bottom: 10px; left: 10px; font-size: 20px; opacity: 1; color: rgb(100, 6, 6); } .btn-add input:not(:placeholder-shown) ~ .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" placeholder=" " > <label class="floating-label" >Button text</label> </div>Dado que :placeholder-shown solo funciona con el texto del marcador de posición que se muestra (sin una cadena vacía), podría usar la visibilidad.
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; } .floating-label { position: absolute; pointer-events: none; left: 20px; top: -20px; transition: 0.2s ease all; color: #999999; font-size: 120%; } .form-float input:placeholder-shown ~ label { top: 0; visibility: hidden; } .form-float { position: relative; } <div class="form-float btn-add"> <input type="text" placeholder="Button Label" > <label class="floating-label">Button Label</label> </div>