CODEWITHSUNDEEP
css
darkrose1977
darkrose1977

Reputation: 307

Is there any pure CSS way to hide only text in the [input=text], not the whole element?

Here is the code:

input[type=text] {display:none}
<input type="text" />

It would hide the whole input element.

Is there a way to keep the input element's out frame UI and just only hide its content without setting its value to "" by js.

Upvotes: 0

Views: 199

Answers (3)

Dominik Schreiber
Dominik Schreiber

Reputation: 2771

Make the color transparent.

.value-hidden { color: transparent }
.value-hidden::selection { color:transparent; }
<input class="value-hidden" value="the hidden message">

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272986

Simply font-size:0 but you need to make sure to apply a width/height to the input.

input[type=text] {
  font-size:0;
  min-width:200px;
  min-height:30px;
}
<input type="text" value="hello world">

Upvotes: 0

giuseppedeponte
giuseppedeponte

Reputation: 2391

This will work if your input value is not excessively long:

.value-hidden { text-indent: -99em; }
<input class="value-hidden" value="the hidden message">

Upvotes: 1

Related Questions