Enhanced emphasis on user input with Bootstrap animation

Question

Enhanced emphasis on user input with Bootstrap animation

I am just starting out as a web developer and I'm currently working on a project using Bootstrap 4.

Here is the HTML code I have:

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque 03 Baza wiedzy

And here is the CSS code:

.boxes .box3 {
  background-position: center;
  background-size: cover;
  background-image: url("/img/slide3.jpg");
  color: white;
  height: 872px;
}

...

.boxes-show-search-ico {
  cursor: pointer;
}

.boxes .border-3 {
  border-width: 3px !important;
}

Here is a preview of my work: https://ibb.co/wB4qht5

However, I am facing a small issue with my input field.

I want to create an animation for the input field when it's in focus, where the text "czego szukasz" should appear after clicking on the input field. It should behave similar to this example: (imie, nazwisko, numer telefonu, etc).

Can anyone guide me on how to achieve this effect?

css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

If you want to implement a "floating" label effect, you can make use of CSS3 transitions by setting the position of your <label> element to absolute. This will allow the label to move and scale when the input is focused or valid. You can also use a simple script to check if the inputs are not empty and add a class instead of relying solely on CSS pseudo classes (which cannot achieve this functionality using pure CSS). Make sure to wrap both your <input> and <label> elements in a container with its position set to relative, similar to what was done in the example provided.

* {
  font-family: 'Arial', sans-serif;
  font-size: 20px;
}

.inputContainer {
  position: relative;
}

.inputContainer input {
  padding: 18px 10px 5px;
  margin-top: 10px;
  border: none;
  border-bottom: 1px solid gray;
}

.inputContainer label {
  position: absolute;
  top: 28px;
  left: 10px;
  transform-origin: 0 0;
  transition: all 0.3s ease;
}

.inputContainer input:focus+label,
.inputContainer input:valid+label {
  transform: translateY(-15px) scale(.625);
}

<div class="inputContainer">
  <input type="text" id="search" required />
  <label for="search">Enter your search query</label>
</div>

Answer 2

If you want to implement a "floating" label effect, you can make use of CSS3 transitions by setting the position of your <label> element to absolute. This will allow the label to move and scale when the input is focused or valid. You can also use a simple script to check if the inputs are not empty and add a class instead of relying solely on CSS pseudo classes (which cannot achieve this functionality using pure CSS). Make sure to wrap both your <input> and <label> elements in a container with its position set to relative, similar to what was done in the example provided.

* {
  font-family: 'Arial', sans-serif;
  font-size: 20px;
}

.inputContainer {
  position: relative;
}

.inputContainer input {
  padding: 18px 10px 5px;
  margin-top: 10px;
  border: none;
  border-bottom: 1px solid gray;
}

.inputContainer label {
  position: absolute;
  top: 28px;
  left: 10px;
  transform-origin: 0 0;
  transition: all 0.3s ease;
}

.inputContainer input:focus+label,
.inputContainer input:valid+label {
  transform: translateY(-15px) scale(.625);
}

<div class="inputContainer">
  <input type="text" id="search" required />
  <label for="search">Enter your search query</label>
</div>

Enhanced emphasis on user input with Bootstrap animation

Answer №1

Similar questions

The CSS styling for an active link is not functioning correctly on a single page when using sections

What is the solution to the question: "Hey there, time traveler. We are currently in an era where CSS prefixes are no longer necessary, thanks to the advances in prefix-less CSS

Animate the coloring process with dynamic motion

Creating a FadeIn animation for a hidden div element by using the display:none property

Adjusting Iframe to Fit Entire Screen Using CSS

How to Customize Shadow-DOM Elements in Audio Player on Webkit and Chrome

Troubleshooting: jQuery unable to locate element within iframe

Code-behind not functioning properly for Bootstrap Modal

Adding or removing a class on hover in Tailwind: The simple way!

How can I create a custom column in Bootstrap-Vue?

The webview is failing to display the dropdown menu

An issue is being caused by altering the custom.scss.css file in Rails

When Bootstrap 4 teams up with Autoprefixer, it results in malfunctioning old iPads

Modifying the background-image to an SQL image

Dim the entirety of the page while accentuating specific regions

Offspring Div Protruding from Mother Div

"Enhancing the Spacing of Elements Using Margin and Padding in a Floating

Issue with Bootstrap dropdown not appearing properly when switching between screen sizes

Tips on customizing the appearance of mat-card-title within a mat-card

Solving the mystery of background color in CSS for heading/title div