[ANSWERED] html – How to hide text with after on focus?

Question 1

Just add focus-within before your ::after

.form-search:focus-within::after {
    display: none;
}

.form-search__input:not(:focus) {
  color: transparent !important;
}

.form-search__input {
  font-weight: 600;
  font-size: 18px;
  color: #abff00;
  font-style: italic;
  font-family: "Open Sans";
}

.search-txt {
  position: absolute;
  left: 3rem;
  font-weight: 600;
  font-size: 18px;
  color: #abff00;
  font-style: italic;
  font-family: "Open Sans";
}

.form-search::after {
  content: "Search";
  font-weight: 600;
  font-size: 18px;
  color: #abff00;
  font-style: italic;
  font-family: "Open Sans";
  position: absolute;
  left: 3rem;
}

.form-search:focus-within::after {
  display: none;
}

<form role="search" method="get" class="form-search" action="/" _lpchecked="1">
  <input type="text" value="Search" name="s" id="s" class="form-search__input" placeholder="Search">
</form>

Question 2

I guess you want this inside the input tag:

onfocus="this.value=''"

use this instead:

 <input type="text" onfocus="this.value=''"  value="Search" name="s" 
 id="s" class="form-search__input" placeholder="Search">

Question 3

You need to use css event :focus-within

Because the focus is not directly on form but on input
:focus-within will listen on focus on parent and childs

You can replace

.form-search:after:focus {
    display: none;
}

with

.form-search:focus-within::after {
    display: none;
}

If you want to hidde after the first focus and don’t rerender after the focus out, you need to use Javascript

Question 4

You just need to change

.form-search:focus-within::after {
  display: none;
}

.form-search__input:not(:focus) {
  color: transparent !important;
}

.form-search__input {
  font-weight: 600;
  font-size: 18px;
  color: #abff00;
  font-style: italic;
  font-family: "Open Sans";
}

.search-txt {
  position: absolute;
  left: 3rem;
  font-weight: 600;
  font-size: 18px;
  color: #abff00;
  font-style: italic;
  font-family: "Open Sans";
}

.form-search::after {
  content: "Search";
  font-weight: 600;
  font-size: 18px;
  color: #abff00;
  font-style: italic;
  font-family: "Open Sans";
  position: absolute;
  left: 3rem;
}

.form-search:focus-within::after {
  display: none;
}

<form role="search" method="get" class="form-search" action="/" _lpchecked="1">
  <input type="text" value="Search" name="s" id="s" class="form-search__input" placeholder="Search">
</form>

Question 5

How to hide Text with ::after on focus? I’ve tried this:

.form-search:after:focus {
   display: none; }

But :focus not works with after.
This is my code for this search bar:

.form-search__input:not(:focus) {
  color: transparent !important;
}
.form-search__input {
  font-weight: 600;
  font-size: 18px;
  color: #abff00;
  font-style: italic;
  font-family: "Open Sans";
}
.search-txt {
  position: absolute;
  left: 3rem;
  font-weight: 600;
  font-size: 18px;
  color: #abff00;
  font-style: italic;
  font-family: "Open Sans";
}
.form-search::after{
  content: "Search";
  font-weight: 600;
  font-size: 18px;
  color: #abff00;
  font-style: italic;
  font-family: "Open Sans";
  position: absolute;
  left: 3rem;
}
.form-search:after:focus {
  display: none;
}

<form role="search" method="get" class="form-search" action="/" _lpchecked="1">
  <input type="text" value="Search" name="s" id="s" class="form-search__input" placeholder="Search">
</form>

Bollate

[ANSWERED] html – How to hide text with after on focus?

By

Solution 1 :

Solution 2 :

Solution 3 :

Solution 4 :

Problem :

Comments

Comment posted by DecPK

Comment posted by DecPK

By

Related Post

[ANSWERED] HTML & Javascript – make text appear when dropdown menu option selected

[ANSWERED] python – Extract text from a class in HTML using CSS language

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate