Creating a minimalistic floating placeholder in HTML and CSS without the need to define a background color for the placeholder

Hey there, I'm currently working on implementing a floating placeholder for an input field. However, I'm facing an issue where I don't want to set the placeholder with a background color due to the varying input backgrounds and styles in my project. Is there a way to hide whatever is underneath the floating label in order to conceal the input line? https://i.sstatic.net/CbB9D5Lr.png

JSX

  return (
          <input
            ref={inputRef}
            className={classes.inputStyle}
            value={startDate ? startDate.toDateString() : ""}
            readOnly={!startDate}
            required
          />
          <label>{Label}</label>

CSS

.inputwrap input {
  @include InputField(291px, 55px, 10px);
   // more CSS code follows..
}

// More CSS code for label styling
htmlcssreactjsinputsass

Answer №1

This combination of fieldset/legend was created for a specific purpose.

To achieve the desired effect, replicate the label/placeholder text within the legend element and then conceal it using your preferred method.

Next, modify the label to take the place of the legend visually.

legend span {
  color: transparent;
}

fieldset {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: start;
}

label {
  transition: transform .33s ease;
  padding: 0 .25em;
}

input:focus+label {
  display: inline-block;
  transform: translatey(-100%);
}
<fieldset>
  <legend><span>Placeholder</span></legend>

  <input type="text" name="text">
  <label for="text">Placeholder</label>
</fieldset>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Fixing W3 Validation Errors in your Genesis theme through CSS requires a few simple steps. Let's

As a newcomer to this forum, I kindly ask for understanding regarding my current issue. Upon checking my website vocaloid.de/Wordpress/ using the W3C CSS validator, I discovered several parsing and value errors. In an attempt to solve this, I disabled all ...

htmlcssvalidationgenesis

How can we insert data at the bottom of a table to begin with?

I am looking to add information retrieved from the iTunes API to the end of a table. The first album I receive will be placed at the very end, with each subsequent album adding on while pushing the previous one up in the hierarchy. Any ideas on how I can ...

javascriptreactjsalgorithmdatatable

Configuring babel-plugin-styled-components with TypeScript in a create-react-app environment

Currently, we are working on integrating the babel-plugin-styled-components into our setup, which is based on typescript and create-react-app. Our main goal is to improve the debugging experience, but we are facing challenges in achieving this. We want to ...

reactjstypescriptbabeljscreate-react-appstyled-components

Using CSS to create sleek all-black Flaticons

After trying various solutions, I am still unable to fix this issue. I downloaded some icons and in the demo, they all appear as they should, with a more colorful aesthetic. Here is what the icons should look like: However, this is how the icons actually ...

htmlcssfontsicons

Foundation 5.2.2: Creating a Dropdown Menu

Would it be possible to achieve this effect using Foundation: https://i.stack.imgur.com/UyYqK.png ? I am interested in implementing 2 COLUMNS in the TopBar Menu: foundation.zurb.com/docs/components/topbar.html I came across a MegaMenu (codepen.io/winghou ...

htmlcssnavigationzurb-foundationnavbar

Exploring the inner workings of CSS shapes

http://jsfiddle.net/zth05v3q/ div { background:red; width:100px; height:100px; } div:after{ content: ''; position: absolute; display: block; border: 40px solid green; border-left-width: 15px; bord ...

cssshapescss-shapes

Unable to reach the build on the Linux server

After deploying my react project on a Linux server and creating a production build using "sudo npm run build," I am encountering issues accessing the project. When I run the build file "serve -s build" and attempt to access the app via the remote URL provi ...

javascriptlinuxreactjs

Encountering syntax errors with CommonJS Rollup plugin when attempting to import third-party libraries, particularly those involving the 'process' module

I have been developing a personalized rollup configuration that involves React projects and inlines the JS and CSS in index.html. When attempting to import third-party React libraries (such as material-ui-color), I encountered an issue with CommonJS repo ...

reactjstypescriptbabeljscommonjsrollupjs

Difficulty in modifying a global variable within an event handler

I am working on an ionic4 app that includes a button. The goal is to display the accelerometer alpha value when the button is pressed. However, I am encountering an issue where the event handler invoked by the event listener does not seem to update the g ...

javascripthtmlangularionic-frameworkionic4

Having difficulty passing the new state value using props in ReactJS

I am facing an issue with sending state values from parent to child components. Initially, the state value is empty but after making an API call, the state value gets updated. However, the props in my child component are still stuck with the initial empty ...

javascriptreactjs

Modifying the order of Vuetify CSS in webpack build process

While developing a web app using Vue (3.1.3) and Vuetify (1.3.8), everything appeared to be working fine initially. However, when I proceeded with the production build, I noticed that Vue was somehow changing the order of CSS. The issue specifically revol ...

javascriptcssvue.jsvuetify.jsvuetify-1

Halt the CSS transition on the preceding element

I tried to pause a CSS transition and came across a question with a solution that seems similar: Is there a way to pause CSS transition mid-way? However, I couldn't make it work for my code. I suspect the issue lies with the before element. What cou ...

javascripthtmlcss

Angular Js: Displaying JSON Object with Multiple Nested Layers

Looking for a way to display a menu using Angular and JSON object that utilizes ul and li. Trying to achieve this using ng-repeat, but encountering challenges when dealing with deeply nested objects. Here's the HTML code: <ul> <li ng-rep ...

htmlangularjsjson

Unable to generate two tables

I have a dynamic table creation issue. The tables are meant to be created based on the user's input for the "super" value. For example, if the user inputs "2" for super, then it should create 2 tables. However, this is not happening as expected becaus ...

javascripthtmlcss

What is the best way to create an element that is clickable but transparent in appearance?

Is there a way to achieve an inset box shadow on elements like an iframe without blocking clicks on the element itself? The common strategy of overlaying a div over the iframe achieves the desired visual effect but unfortunately hinders interaction with th ...

htmlcss

How can I retrieve information from a map in order to establish properties?

Currently, I am facing an issue with react-three-fiber where setting the location of an object dynamically via state does not reflect the data properly. It seems quite odd to me. I'm wondering if anyone has encountered this before and knows how to res ...

reactjsthree.jsreact-three-fiber

The Geolocation API popup on Safari for iOS kept appearing repeatedly

I have successfully implemented a code using the HTML5 Geolocation API to retrieve the user's current position within a mobile website. Although the code functions properly, there is an issue with Safari on iOS. Whenever the page is reloaded, a syste ...

javascriptioshtmlsafarimobile-safari

V5 Modal & jQuery: troubleshooting the spinner problem during loading of content

I'm working on displaying a spinner while loading modal content with the use of bootstrap v5 modal and jQuery. However, I encountered some issues in my example. The spinner does not display again after closing the modal; it only shows for the first t ...

javascriptjquerycsssassbootstrap-5

Shadows on menu buttons transform when clicked using React and CSS

I'm currently working on customizing the styling of a menu using CSS in a project that involves the use of "react-horizontal-scrolling-menu". While I've been successful in styling the menu items with .menu-item:hover & .menu-item:active, I am ...

javascriptcssreactjsstylesmenuitem

What is the best way to position my images next to text using inline-block in CSS?

I'm having trouble aligning images and links side-by-side in my side navigation bar. The images are supposed to show the destination of each link, and I want them to be next to their respective links. I also want the borders of each link to be equal. ...

htmlcss