creating input form with squares for each character in css

Question

i need some help for my web programming assignment; i have to create a form input like shown below using ONLY html and css (so no js).

no, i'm not allowed to use an input field for each square

You're more likely to get help if you post the current code and mention exactly what works and what doesn't. — Toby
– Toby, Commented Mar 25, 2018 at 17:49
@Toby right now i haven't written any css code for it, since i initially tried to make an input for each square before reading i'm not allowed; — radu nicolae
– radu nicolae, Commented Mar 25, 2018 at 17:53
@Dipakchavda i'm allowed to use input, not just one input for each square; i'm not sure how to explain it. — radu nicolae
– radu nicolae, Commented Mar 25, 2018 at 17:54
Possible duplicate of: stackoverflow.com/questions/21131678/… — Edward
– Edward, Commented Mar 25, 2018 at 18:07

Toby · Accepted Answer · 2018-03-25 18:19:43Z

1

One possible solution is to use a repeating background image, either a vertical line or in the example below, an SVG:

input {
  width: 198px;
  font-family: monospace;
  letter-spacing: 8px;
  border: 1px solid #000;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><line style="stroke: #000" x1="20.090665817260742" y1="-0.08398216962814331" x2="20.090665817260742" y2="20.07965660095215"/></svg>');
  background-repeat: repeat-x;
}

Note: I suspect your teacher will consider this "cheating", especially since you've not written any actual CSS yourself. However, this is one possible real-world solution I might use for this.

https://jsfiddle.net/38a4ffh8/54/

answered Mar 25, 2018 at 18:19

Toby

13.5k9 gold badges51 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

radu nicolae Over a year ago

thanks, but i already solved it; the idea was about the same, sope it's good... anyone know how to close a thread?

Collectives™ on Stack Overflow

creating input form with squares for each character in css

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related