CODEWITHSUNDEEP
htmlcssplaceholdersearchbar
Lucas John
Lucas John

Reputation: 26

How to position user typed-in content in search bar input?

I am working on a search bar for my site. It is positioned correctly on the site, it's styled and everything works just fine, I added a placeholder and positioned/styled it inside the search bar as I liked it to fit the rest of my site. If I click inside the search bar and write anything, the written letters appear in the default position of the placeholder (middle of the search bar), but I want them to be positioned differently (more to the left and lower), like the placeholder. The placeholder looks good but the typed-in text doesn't.

The HTML looks like this:

<input id="searchbar" type="text" placeholder="Suche..." />

The search bar is styled as following:

#searchbar {
  grid-area: search;
  font-size: max(var(--ändern), 20px);
  font-family: var(--schriftart);
  background-color: var(--hintergrundfarbe);
  color: var(--schriftfarbe);
  border: solid 1px;
  border-radius: 0.75vw;
  border-color: var(--hintergrundfarbe);
  text-align: center;
  width: 15vw;
  height: max(2.5vw, calc(150px / 4));
  margin-left: 1.25vw;
  margin-top: 0.5vw;
  box-sizing: border-box;
}
input:focus {
  outline: none;
}

The placeholder is styled as following:

#searchbar::placeholder {
  color: var(--schriftfarbe);
  filter: opacity(0.5);
  position: absolute;
  left: 20px;
  top: auto;
  bottom: auto;
}

I tried to use

#searchbar:focus {
  position: relative;
  left: 20px;
  top: auto;
  bottom: auto;
}

but it shifts the whole search bar, not only the the typed-in content. I also tried

text-indent: 40px;

but doesn't seem to change anything either. I would be happy for anyone trying to help me :)

Upvotes: 0

Views: 519

Answers (3)

Christian Schaffner
Christian Schaffner

Reputation: 83

By the looks it might be your font-family. Try a different font like Arial for tests.

font-family: Arial, sans-serif;

Upvotes: 1

Zahra Mirzaei
Zahra Mirzaei

Reputation: 759

Try the below code.

:root {   
--hintergrundfarbe: rgb(182, 97, 22);   
--schriftfarbe: rgb(255, 234, 0);   
--schriftfarbe-hover: rgb(231, 181, 3);   
--schriftfarbe-active: white;   
--schriftart: Javanese Text;   
--überschriftart: Matura MT Script Capitals;   
--ändern: 1.25vw; }

#searchbar {
  grid-area: search;
  font-size: max(var(--ändern), 20px);
  font-family: var(--schriftart);
  background-color: var(--hintergrundfarbe);
  color: var(--schriftfarbe);
  border: solid 1px;
  border-radius: 0.75vw;
  border-color: var(--hintergrundfarbe);
  width: 15vw;
  height: max(2.5vw, calc(150px / 4));
  margin-left: 1.25vw;
  margin-top: 0.5vw;
  box-sizing: border-box;
  padding-left:20px;
  padding-top:10px;
}

input:focus {
  outline: none;
}

#searchbar::placeholder {
  color: var(--schriftfarbe);
  filter: opacity(0.5);
}
<input id="searchbar" type="text" placeholder="Suche..." />

Upvotes: 0

VAIBHAV NIRMAL
VAIBHAV NIRMAL

Reputation: 384

try to do like this:

#searchbar input[type=text]{
/*write your css here*/

  text-indent: 20px;
}

Upvotes: 0

Related Questions