Geek Answers Handbook

Entering full transparent text

I am trying to make a note taking app using HTML5 and CSS. When I try to enter input from a user, I would like the text area to be full (100%) and transparent.

So, basically the text area should be transparent, and the page should just show a white cursor, and there should be no overflow.

If someone can point me to saving and clearing a note, that's great too.

+4
source share
5 answers

Depending on the image you posted, wrap the text box inside the container.

html, body { height: 100%; padding: 0; margin: 0; overflow-x: hidden; } .text-container { background: #4492E0; padding: 20px; height: 100%; position: relative; } textarea { background: transparent; color: white; resize: none; border: 0 none; width: 100%; font-size: 5em; outline: none; height: 100%; position: absolute; } 
 <div class="text-container"> <textarea>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</textarea> </div>
+5
source

Like this? Conservation is a completely different matter, and probably this should be a new question.

 textarea { background:transparent; outline:none; border:none; width:100%; font-size:20px; color:#fff; }
0
source

If you just click {width: 100%} on the text field, you usually get a text field that overflows its container. This is because the width of the text fields will be 100% + padding + borders. You need to resist laying and borders.

An absolutely simple way to do this: add an addition to the wrap element .

The width of the entrance is 100% of its container + 1px + 1px (border) + 4px + 4px (addition). In other words, the width is 100% + 10 pixels; Therefore, we give the fix class an additional 10px pad on the right.

  <!doctype html> <html lang="en"> <head> <style> label { padding: 0; marign: 0; display: block; } textarea { width: 100%; border: 1px solid #333; padding: 4px; } .the-fix { padding-right: 10px; } </style> </head> <body> <label class="the-fix"> A good-looking textarea with a 100% width <textarea></textarea> </label> </body> </html>

for transparency just use CSS DUDE ----

 <textarea style="color: black; background-color: transparent;">Your text</textarea>
0
source

Select " textarea " anyway if you want and apply these styles.

 textarea{ width: 100%; color: #FFF; background: transparent; border: none; outline: none; }
0
source 

 * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; /* optional */ } body { background: cornflowerblue; } textarea { width: 100%; height: 100%; /* optional change it to your height */ padding: 15px; background: transparent; color: #fff; vertical-align: middle; /* removes whitespace as textarea is inline element */ border: 0; } 
 <textarea placeholder="">Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Aenean commodo ligula eget dolor. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Curabitur blandit mollis lacus. Quisque ut nisi. Cras varius. Praesent ut ligula non mi varius sagittis.</textarea>
0
source

More articles:


All Articles