Dealing with the textarea element has been a struggle for me. Despite adding decorations, I am still facing issues with it. The glow and border just won't disappear, which is quite frustrating. Could it be because of the form-control class? When I removed it, I was taken aback.
- Is there any potential risk or compatibility concern in using a div instead of a textarea to collect user input?
- How can I achieve a serene, soft, and customizable look for my textarea? No borders, no glows, no scrolls - just a blank canvas for me to enhance.
HTML:
<div class = 'comment_wrapper'>
<textarea class="commment_content form-control" rows='1' placeholder=""></textarea>
<button class="post_cs btn btn-xs" name="update" type="submit">Comment</button>
<button class="post_cs btn btn-xs" name="sms" type="submit">Cancel</button>
</div>
<div class = 'comment_wrapper'>
<div class='commment_content' contentEditable='true'>
</div>
<button class="post_cs btn btn-xs" name="update" type="submit">Comment</button>
<button class="post_cs btn btn-xs" name="sms" type="submit">Cancel</button>
</div>
CSS:
textarea { /* have tried class commment_content */
border: none;
overflow: auto;
outline: 0; /* have tried none */
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
To make a div editable, simply set its contentEditable attribute to True.