Isaac Stong
Reputation: 13
How to make input invisible but not hidden?
I'm currently trying to create a fully working sudoku web page and I'm having a little trouble styling. I'm kind of a noob to the whole HTML CSS game. Here is a code snippet of what I currently have.
.soduku {
display: block;
justify-content: center;
}
.sudoku__board {
margin-left: auto;
margin-right: auto;
height: 500px;
width: 40%;
border-collapse: collapse;
border: 2px solid black;
}
.sudoku__row,
.sudoku__space {
border: 2px dotted gray;
}
.sudoku__row:nth-child(3n) {
border-bottom: 2px solid black;
}
.sudoku__space:nth-child(3n+1) {
border-left: 2px solid black;
}
tr: nth-child(3n+0) {
border-left: 3px solid black;
}<section class="sudoku">
<table class='sudoku__board'>
<tr class="sudoku__row">
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
</tr>
<tr class="sudoku__row">
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
</tr>
<tr class="sudoku__row">
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
</tr>
<tr class="sudoku__row">
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
</tr>
<tr class="sudoku__row">
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
</tr>
<tr class="sudoku__row">
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
</tr>
<tr class="sudoku__row">
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
</tr>
<tr class="sudoku__row">
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
</tr>
<tr class="sudoku__row">
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
</tr>
</table>
</section>Basically this creates almost exactly what I'm looking for except the inputs are too wide and chunky and very visible. I'm essentially trying to find an option that would be equivalent to if type were hidden except the user can still write within the box and have the number visible. Any ideas or references to helpful pages is appreciated.
Upvotes: 0
Views: 475
Answers (1)
somethinghere
Reputation: 17340
You are tantalisingly close to solving it, all you need to do is style your inputs themselves so they get rid of their default styling:
input {
-webkit-appearance: none;
appearance: none;
border: none;
width: 50px;
height: 50px;
}
document.querySelectorAll( '.sudoku__space input' ).forEach(input => {
input.type = 'number';
input.min = 1;
input.max = 9;
input.step = 1;
}).soduku {
display: block;
justify-content: center;
}
.sudoku__board {
margin-left: auto;
margin-right: auto;
width: 500px;
height: 500px;
border-collapse: collapse;
border: 2px solid black;
}
.sudoku__row,
.sudoku__space {
border: 2px dotted gray;
}
.sudoku__row:nth-child(3n) {
border-bottom: 2px solid black;
}
.sudoku__space:nth-child(3n+1) {
border-left: 2px solid black;
}
tr: nth-child(3n+0) {
border-left: 3px solid black;
}
input {
appearance: none;
-webkit-appearance: none;
border: none;
width: 50px;
height: 50px;
text-align: center;
font-size: 30px;
}<section class="sudoku">
<table class='sudoku__board'>
<tr class="sudoku__row">
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
</tr>
<tr class="sudoku__row">
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
</tr>
<tr class="sudoku__row">
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
</tr>
<tr class="sudoku__row">
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
</tr>
<tr class="sudoku__row">
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
</tr>
<tr class="sudoku__row">
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
</tr>
<tr class="sudoku__row">
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
</tr>
<tr class="sudoku__row">
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
</tr>
<tr class="sudoku__row">
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
<th class="sudoku__space"><input type="text" maxlength="1"></th>
</tr>
</table>
</section>As a little extra I have added a script that will amend all your inputs (because I'm lazy its a script) so they will actually look like this:
<input type="number" min="1" max="9" step="1" maxlength="1" />
Which will limit all the values in those boxes to 1 through 9.
Upvotes: 1
Related Questions
- Make input invisible through css?
- Is there a way of making text hidden in an input box?
- Making div element invisible on particular input
- Use css to hide input type=text
- How to hide an input-box with CSS
- make an input invisible but clickable through CSS?
- Changing style of input without display:none
- Make input form invisible
- Make input control invisible and keep input functionality
- CSS or JS to hide an INPUT but keep text displayed?