Back

Revolutionizing Feedback with a Floating Input

Unlock creativity with a playful, floating input field that adapts its shape and size as you type.

HTML

Start with a simple HTML structure that includes a container for the bubbling effect and an input field.


        <div class="bubble-wrapper">
          <input type="text" class="floating-input" placeholder="Type your feedback here...">
        </div>

JavaScript

Use JavaScript to dynamically adjust the size of the input. The input will grow as you type more text. The event listener on the input field continuously checks the length of the input value. Accordingly, it manipulates the width and the height of the input field for a playful effect.


        document.querySelector('.floating-input').addEventListener('input', function() {
          let input = document.querySelector('.floating-input');
          let valueLength = input.value.length;
          input.style.width = Math.min(valueLength * 10 + 50, 300) + 'px';
          input.style.height = Math.min(valueLength * 5 + 20, 150) + 'px';
        });

CSS

Utilize CSS to create a smooth, visually appealing interface that changes dynamically. The bubble-wrapper class centers everything, ensuring the floating input remains in the spotlight. Apply glassmorphism with the floating-input class to give a modern, semi-transparent effect. With transition properties, the input's acclivity is aesthetically pleasant, maintaining ease for users.


        .bubble-wrapper {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
        }

        .floating-input {
            width: 50px;
            height: 30px;
            padding: 10px;
            border: none;
            border-radius: 50px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            transition: width 0.3s ease, height 0.3s ease;
            font-size: 1rem;
            font-family: 'Arial', sans-serif;
            color: #333;
            outline: none;
        }

In this way, we are able to design an interactive input field using innovative technology trends like glassmorphism. Your feedback inputs now float and expand as you type, offering an intriguing user experience.

Whole code

<div class="bubble-wrapper">
  <input type="text" class="floating-input" placeholder="Type your feedback here...">
</div>


<script>
document.querySelector('.floating-input').addEventListener('input', function() {
  let input = document.querySelector('.floating-input');
  let valueLength = input.value.length;
  input.style.width = Math.min(valueLength * 10 + 50, 300) + 'px';
  input.style.height = Math.min(valueLength * 5 + 20, 150) + 'px';
});
</script>

<style>
.bubble-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
.floating-input {
  width: 50px;
  height: 30px;
  padding: 10px;
  border: none;
  border-radius: 50px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  transition: width 0.3s ease, height 0.3s ease;
  font-size: 1rem;
  font-family: 'Arial', sans-serif;
  color: #333;
  outline: none;
}
</style>

Thank you for reading this article.

Revolutionizing Feedback with a Floating Input

HTML

JavaScript

CSS

Whole code

Comments

More inputs

Similar

See also