html - Parallelogram Textbox -


How do I create a parallel type of text box where the text will be raised vertically.

To add slant to my text box, I'm using CSS below:

  #parallelogram {margin: 0 20px; Webkit-conversion: skew (30 degrees); -MOZ-TRANSM: SQUAU (30 degrees); -O-Convert: Skew (30 degrees); }  

Textbox alignment was also affected, I just want to align the text box vertically. (See screenshot below)

Enter image details here

You can try changing the text of the parent of the text box and removing the text box (and the outline), so the text That your type has proper vertical alignment.

  #parallelogram {border: 1px solid black; Display: inline-block; Margin: 02020 px; Padding: 0 3px 0 3px; Webkit-conversion: skew (30 degrees); -MOZ-TRANSM: SQUAU (30 degrees); -O-Convert: Skew (30 degrees); } #parallelogram Input {Outline: None; Border: None; Webkit-conversion: oblique (-30 degrees); // Set the nest slant angle to 0-noise-transform: skew (-30 degrees); -o-results: slanting (-30 degrees); }  

( parallelogram is the ID of the wrapped div surrounding the input box)

< / Html>

Comments

Popular posts from this blog

ios - How do I use CFArrayRef in Swift? -

eclipse plugin - Run java code error: Workspace is closed -

c - Error on building source code in VC 6 -