Input Amarillo Estiloso

VISTA PREVIA CSS

Regístrate para guardar

.stylish-yellow-input-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 320px;
  margin: 20px auto; /* Centra el componente para demostración, no esencial para el estilo del input */
}

.stylish-yellow-label {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 0.95em;
  color: #555;
  font-weight: 600;
  margin-bottom: 2px;
}

.stylish-yellow-input {
  background-color: #FFECB3; /* Amarillo claro y cálido */
  border: 1px solid #FFD700; /* Borde dorado */
  padding: 12px 16px;
  border-radius: 8px; /* Esquinas ligeramente redondeadas */
  font-family: 'Verdana', sans-serif;
  font-size: 1em;
  color: #4A4A4A;
  width: 100%;
  box-sizing: border-box; /* Asegura que padding y border se incluyan en el width */
  transition: all 0.3s ease; /* Transición suave para los cambios de estado */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para profundidad */
}

.stylish-yellow-input::placeholder {
  color: #B8860B; /* Color de placeholder amarillo-marrón */
  opacity: 0.8;
}

.stylish-yellow-input:focus {
  outline: none; /* Elimina el outline por defecto del navegador */
  border-color: #FFC107; /* Borde más brillante en foco */
  box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.3); /* Resplandor amarillo en foco */
  background-color: #FFFBE0; /* Fondo ligeramente más claro en foco */
}