How to add "second placeholder" on Input text

Question

I need to add a second text (required) in input text, diferent style/position of placeholder. But when user clicks, it should disappear, like placeholder. It's possible?

<style>
  .inputDataText{
    padding:13px; 
    border-width:1px; 
    border-radius:9px; 
    border-style:solid; 
    border-color:#d9d9d9; 
    width:100%;
  }
  
</style>
<input id="demoTextBox" type="text" value="" class="inputDataText" placeholder="NAME">

Put an example image here:

Input image

If you specified a fixed width for the input item, the you can add spaces into your existing placeholder text to push some text to the right. These spaces are preserved when the text is being rendered — ATD
– ATD, Commented Sep 25, 2020 at 11:36
take a look at: codepen.io/Takumari85/pen/RaYwpJ the "Input with Label effects" at the bottom of the page. Its possible, yes, but you may need to work it out yourself. — Dxg125
– Dxg125, Commented Sep 25, 2020 at 11:36
Also, it is common to use * next to an input item and a note above or below all of them saying that these items are required. — ATD
– ATD, Commented Sep 25, 2020 at 11:38

Lalji Tadhani · Accepted Answer · 2020-09-25 11:41:57Z

2

try

.inputDataText{
    padding:13px; 
    border-width:1px; 
    border-radius:9px; 
    border-style:solid; 
    border-color:#d9d9d9; 
    width:100%;
    box-sizing: border-box;
  }
  .inputwrapper{
   position: relative;
  }
 .inputwrapper::after {
    content: attr(data-required);
    position: absolute;
    right: 8px;
    top: 50%;
    font-size: 15px;
    transform: translateY(-50%);
    color: #ccc;
}

<div class="inputwrapper" data-required="(required)">
<input id="demoTextBox" type="text" value="" class="inputDataText" placeholder="NAME">
</div>

answered Sep 25, 2020 at 11:41

Lalji Tadhani

14.2k3 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Samuli Hakoniemi Over a year ago

I was about to answer this question as well, but @Lalji was faster :). However, here's a link to my implementation which is very similar: codepen.io/zvona/pen/XWdGJNK

Steve -Cutter- Blades · Accepted Answer · 2020-09-25 11:45:26Z

0

This could be done with the :empty pseudo selector

.inputDataText:empty::after {
  // show something
}

.inputDataText::after {
  // hide something
}

You will have to play with the exact CSS, but that's the gist

answered Sep 25, 2020 at 11:45

Steve -Cutter- Blades

5,4623 gold badges30 silver badges46 bronze badges

Collectives™ on Stack Overflow

How to add "second placeholder" on Input text

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related