Floating label hides the textbox text with a unique style

Question

Floating label hides the textbox text with a unique style

I'm trying to create a floating label effect for textboxes in my form that moves up on hover and focus. However, I'm running into an issue where the text gets hidden when the label moves up.

Below is the HTML and CSS code I've been working with:

.float-label {
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px 6px;
    color: #767676;
    pointer-events: none;
    transition: 0.2s ease all;
}

.form-control:focus ~ .float-label, 
.form-control:not(:focus):valid ~ .float-label {
    top: -18px;
    margin-left:5px;
    font-size: 12px;
    opacity: 1;
    z-index: 1;
    background-color: white;
}

                            <div class="form-group border-lable-flt">
                                <input type="email" class="form-control" id="work_email" required>
                                <label class="float-label" for="workEmail">Work email</label>
                            </div>

html css

Answer 1

Answer №1

If you prefer not to use the color: transparent property for the placeholder text, you can achieve the same effect by closely matching the styles of the label and placeholder using the :placeholder-shown pseudo-class.

.form-group {
  position: relative;
  padding: 20px;
}
.float-label {
    position: absolute;
    left: 25px;
    top: 21px;
    color: #767676;
    pointer-events: none;
    transition: 0.2s ease all;
}

input::placeholder {
  color: transparent;
}

.form-control:focus ~ .float-label, 
.form-control:not(:focus):valid ~ .float-label,
input:not(:placeholder-shown) ~ .float-label {
    top: 5px;
    font-size: 12px;
    opacity: 1;
    z-index: 1;
    background-color: transparent;
}

    <div class="form-group border-lable-flt">
        <input type="email" class="form-control" id="work_email" required placeholder="Work email">
        <label class="float-label" for="workEmail">Work email</label>
    </div>

Answer 2

If you prefer not to use the color: transparent property for the placeholder text, you can achieve the same effect by closely matching the styles of the label and placeholder using the :placeholder-shown pseudo-class.

.form-group {
  position: relative;
  padding: 20px;
}
.float-label {
    position: absolute;
    left: 25px;
    top: 21px;
    color: #767676;
    pointer-events: none;
    transition: 0.2s ease all;
}

input::placeholder {
  color: transparent;
}

.form-control:focus ~ .float-label, 
.form-control:not(:focus):valid ~ .float-label,
input:not(:placeholder-shown) ~ .float-label {
    top: 5px;
    font-size: 12px;
    opacity: 1;
    z-index: 1;
    background-color: transparent;
}

    <div class="form-group border-lable-flt">
        <input type="email" class="form-control" id="work_email" required placeholder="Work email">
        <label class="float-label" for="workEmail">Work email</label>
    </div>

Answer 3

Answer №2

Consider implementing the following modifications :

.input-group{
  margin-top:20px;
  position:relative;
}
.label-float {
  position: absolute;
  left: 0;
  top: 0;
  padding:0;
  color: #767676;
  pointer-events: none;
  transition: 0.2s ease all;
}

Answer 4

Consider implementing the following modifications :

.input-group{
  margin-top:20px;
  position:relative;
}
.label-float {
  position: absolute;
  left: 0;
  top: 0;
  padding:0;
  color: #767676;
  pointer-events: none;
  transition: 0.2s ease all;
}

Answer 5

Answer №3

Here is the code snippet you can use to create a stylish email input field:

<div class="form-group border-lable-flt textinput">
  <input type="email" id="email" class="form-control"  />
  <label for="email">Email address</label>
</div>

And here is the corresponding CSS styling:

.textinput {
  height: 3em;
  margin: 1em 0;
  position: relative;
  width: 100%;
}

.textinput input,
.textinput label {
  cursor: text;
  font-size: 1.5em;
  padding: 0.6em 1% 0.15em 1%;
  position: absolute;
  transition: all 0.15s ease;
  width: 98%;
}

.textinput input {
  border: solid black 1px;
  border-radius: 0.15em;
}

.textinput label {
  color: #BCB9B8;
  padding: 0.5em 1%;
}

.textinput input.filled ~ label,
.textinput input:focus ~ label {
  font-size: 0.6em;
  font-weight: 600;
  position: absolute;
}

.textinput input.filled ~ label {
  color: #007932;
}

.textinput input[type="text"].filled,
.textinput input[type="email"].filled:valid {
  background: #B8DB9B;
}

.textinput input[type="text"].filled ~label:after,
.textinput input[type="email"].filled:valid ~label:after {
  color: #007932;
  content: "\f058";
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 3em;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  top: 0.3em;
  right: 0.3em;
  transform: translate(0, 0);
}

Answer 6

Here is the code snippet you can use to create a stylish email input field:

<div class="form-group border-lable-flt textinput">
  <input type="email" id="email" class="form-control"  />
  <label for="email">Email address</label>
</div>

And here is the corresponding CSS styling:

.textinput {
  height: 3em;
  margin: 1em 0;
  position: relative;
  width: 100%;
}

.textinput input,
.textinput label {
  cursor: text;
  font-size: 1.5em;
  padding: 0.6em 1% 0.15em 1%;
  position: absolute;
  transition: all 0.15s ease;
  width: 98%;
}

.textinput input {
  border: solid black 1px;
  border-radius: 0.15em;
}

.textinput label {
  color: #BCB9B8;
  padding: 0.5em 1%;
}

.textinput input.filled ~ label,
.textinput input:focus ~ label {
  font-size: 0.6em;
  font-weight: 600;
  position: absolute;
}

.textinput input.filled ~ label {
  color: #007932;
}

.textinput input[type="text"].filled,
.textinput input[type="email"].filled:valid {
  background: #B8DB9B;
}

.textinput input[type="text"].filled ~label:after,
.textinput input[type="email"].filled:valid ~label:after {
  color: #007932;
  content: "\f058";
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 3em;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  top: 0.3em;
  right: 0.3em;
  transform: translate(0, 0);
}

Floating label hides the textbox text with a unique style

Answer №1

Answer №2

Answer №3

Similar questions

IE - Adjusting the Width of the Vertical Spry Menu Bar

Controlling CSS Styles in Angular using TypeScript

Enhance the functionality of Woocommerce email notifications by incorporating a customized VAT field

Issue with Expo Google Places Autocomplete: ListView not clickable

Enhanced auto-zoom feature with orientation change for iOS 7

Deactivating one div's class upon clicking on another div

jQuery - Enhancing User Experience with Dynamic Screen Updates

The scroll bar is visible on the scroll box, but unfortunately it is not functional in Internet Explorer 8

Is it possible to rotate a group within an SVG without altering the orientation of the gradient fill it contains?

What is the process for removing a full row from a table in PHP?

Error message "Undefined is not a function" occurred while using jQuery's .replace and scrollTop functions

Resolving issues with CSS placement and resizing

Display different images based on user selection in vue.js

Removing the 'div' tag using jQuery in CodeIgniter

"Utilize input within the div element to occupy the entire cell of the

When the text is in motion, the ::before element will stay static

Navigating the web page and locating the appropriate Xpath element to extract

adjusting the font size based on the size of the screen

Creating trails by following the cursor's movement in KineticJS

Issue with color display inconsistency in webgrid across various segments