Question 203919 in CSS Question posted in
Some basic documentation can be found here.

Css – How to format the placeholder of html textarea element

I want to make placeholder formatted as attached.
The full content of placeholder is: "I will do something I really good at". In which, "I will" is font-weight bold, the rest is normal.

I don’t have any idea how to do this. Can anyone please give me a solution. Thank you.

enter image description here

Tags:

2

Answers


  1. 0

    I think the first two words are text inside of the textarea tag.
    You could use a div with contenteditable attribute and manipulate it using ::before and some JavaScript.
    This is an example and you can modify it as you wish:

    const div = document.querySelector('div')
div.oninput = ()=>{
 div.classList.remove('bg')
}
    div{
  background:white;
  border:1px solid green;
  padding:5px;
  cursor:text;
  width:300px;
  min-height:200px;
}
.bg::before{
  content:"do someting I'm really good at";
  color:gray;
  position:absolute;
  margin-left:50px;
}
    <div class='bg' contenteditable>
  I will&nbsp; 
</div>
    Login or Signup to reply.
  2. 0

    Hi,

    I think there is a solution, but it’s a bit tricky. As far as I know with pure CSS we can’t change the font-weight for just a part of placeholder text, but we can play a little bit with text color.

    Solution

    We can use the background settings to only appear for the text and set the text color transparent. In short that give us the text with the content (color) of the background.

    To achieve the effect of getting only a piece of text in a different color, we can apply a linear gradient to our background. The negative trait of this solution is that we need to calculate/match how much of text want in another color, but in your case when the placeholder text (and it’s design) is static we can set that once for this specific element and should be good.

    I prepared a short code snippet with descripted idea below:

    ::placeholder {
  background-image: linear-gradient(90deg, black 13%, gray 13%);
  background-clip: text;
  color: transparent;
  /* In most browsers, the placeholder text is grey through opacity, so we disable it's transparency. */
  opacity: 1;
}
    <textarea name="vanminhquangtriTextarea" rows="5" cols="50" placeholder="I will do something I really good at"></textarea>

    Knowledge

    You can read more about creating multicolor text using element background e.g. on this webside, it’s nicley explained in my opinion.

    The source of information about CSS properties can be for example W3Schools:

    I hope it meets your requirements, because in this solution, the whole text has the same font weight, and only the colors of individual parts of the text have changed.

    Cheers

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search