Hay there! I made some code for a hidden input form for like a cool secret admin area, but the text still shows. I was wondering if there is any way to hide the text

<input class="a"> <style> .a{ border: none; } .a:focus{ border: none; outline: none;} </style>

jsfiddle: https://jsfiddle.net/Jortfake/ygt4fcuq/7/

CodePudding user response：

make the font colors match background things.

CodePudding user response：

You can also just use visibility: hidden; on your <h2>

.a{
  border: none;
}
.a:focus{
  outline: none;
  border: none;
}

h2 {
  visibility: hidden;
}

<input value="" class="a">
<h2>
The input form is right above me. 
</h2>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

To hide the text inside the input element you can use:

.a {
   color: transparent;
}