CODEWITHSUNDEEP
htmlcss
julupo
julupo

Reputation: 19

How change text of input placeholder on focus use only css?

How change text of input placeholder on focus use only css? The initial state:

<form action="">
  <input type="text" placeholder="Search">
  <button type="submit">Search</button>
</form>

What I want to get on focus of input. I need use only css, not js.

<form action="">
  <input type="text" placeholder="Hello">
  <button type="submit">Search</button>
</form>

Upvotes: 1

Views: 7496

Answers (5)

Bharti Sharma
Bharti Sharma

Reputation: 363

Please try the following code. I attempted to fulfill your requirement using only CSS.

/* Initial state */
  .input-wrapper {
    position: relative;
  }

  .input-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    line-height: 40px; /* Adjust line-height to vertically center */
    pointer-events: none; /* Ensure the placeholder text doesn't interfere with input */
    transition: top 0.3s, font-size 0.3s; /* Add smooth transition */
    color: #999; /* Placeholder text color */
    visibility: hidden;
  }
  
  
  input:focus::placeholder {
    opacity: 0; /* Show initial placeholder text when input is focused */
  }


  input:focus + .input-placeholder,
  input:not(:placeholder-shown) + .input-placeholder {
    top: 50%;
    font-size: 12px;
    color: #000;
    visibility: visible;
    transform: translateY(-50%);
    left: 3px;
  }
  
    input:not(:placeholder-shown) + .input-placeholder,
  input:focus:not(:placeholder-shown) + .input-placeholder {
    display: none; /* Hide placeholder when input is not empty and not focused */
  }
<form action="">
  <div class="input-wrapper">
    <input type="text" placeholder="Search">
    <div class="input-placeholder">Hello</div>
  </div>
  <button type="submit">Search</button>
</form>

Upvotes: 1

Ria diat
Ria diat

Reputation: 1

You can use this trick in css file:

  input[type=text]:focus::placeholder {
    color: white;
  }

Upvotes: 0

Gergő Horv&#225;th
Gergő Horv&#225;th

Reputation: 3705

It's a bit tricky. We can use :placeholder-shown, and :focus on input elements, but unfortunately can't use ::after or ::before (as they are the only ways to adjust text content with pure css with content prop).

So the idea is to create an input container, an input and a fake placeholder inside as a span.

.input-container {
  position: relative;
}

input:placeholder-shown + .placeholder::after {
  content: "placeholder";
}
input:placeholder-shown:focus + .placeholder::after {
  content: "focus";
}

.placeholder {
  position: absolute;
  top: 0;
  left: 0;
}
<div class="input-container">
  <input placeholder=" "/>
  <span class="placeholder" />
</div>

This way we'll know when the placeholder is visible (no input made yet), and when is it on focus, and this way with the sibling selector, control the fake placeholders after,

Upvotes: 1

Wasiq Muhammad
Wasiq Muhammad

Reputation: 3118

Assuming you need to change value of textbox so it will do through Javascript or Jquery. There are two different things CSS and Javascript. if your problem is concern with styling CSS is a solution , if its functionality and logic Javascript is responsible

<input type="text" id="txt" placeholder="Search" onfocus="changeOutput()"/>

<script>
function changeOutput(){
  document.getElementById('txt').value = "Hello";
}
</script>

Upvotes: 0

Fatih Aktaş
Fatih Aktaş

Reputation: 1564

That really isn't what CSS is for.

CSS is for styling your content; HTML is for the actual content itself.

If you need to modify the content after the HTML has loaded, then that's what Javascript is for.

So the real answer to your question is: either modify the HTML directly or use Javascript.

Using Vanilla Javascript, you can change the input element using its id.

function changeOutput(){
  document.getElementById('hi').value = "changed text";
}
<h1>Hello World!</h1>
INPUT: <input type="text" id="hi" placeholder="placeholding text" onfocus="changeOutput()"/>

Live Example

Upvotes: 1

Related Questions