Madhu Munna Madhu Munna -3 years ago 113
CSS Question

How to replace image (icon) insted of input type file with same action in text area?

I am new in web design. I want to build a comment system for my web site, I have some issues with text area. How to replace the image (icon) instead of input type file with the same action in the textarea?

How can I implement the same?

HTML

<div class="upload">
<div class="image-upload">

<textarea name="" id="txt" cols="20" rows="5"></textarea>
<label for="file-input">
<img src="">
</label>

<input id="file-input" type="file"/>
</div>
</div >


CSS

.upload{
display:inline-block;
position:relative;
}
input{
position:absolute;
bottom:10px;
right:2px;
}
textarea{
display:block;
width:500px;
}
.image-upload > input
{
display: none;
}
.image-upload img
{
width: 40px;
cursor: pointer;
}


I tried many times but not working.

Answer Source

To add an icon in the textarea, insert the <img> tag for the icon after the <textarea>, then add the following to the CSS:

.icon-class {
    position: absolute;
    top: 0;
    left: 0;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download