CODEWITHSUNDEEP
htmlcssgoogle-chrometextareaopera
Human Being
Human Being

Reputation: 8387

HTML textarea appearance changed after a click inside?

My Textarea appearance will be changed after I clicked inside it. This will happens in google-chrome , Safari. Also it displays a scroll bar when the page gets loaded in Opera.

I don't want the change in the appearance.

Before clicking in Textarea ,

enter image description here

After clicking in Textarea ,

enter image description here

Also in opera , Textarea looks with scroll bar,

enter image description here

How to disable this scroll bar in opera ? Its will happens in opera when the page gets loaded.

My jsp will be,

<div id="messageArea">
    <table border="0" width="95%">
        <tr>
            <td id="msgvalue" style="width:91%;border-color: #6495ED;border-style: solid;border-width: 1px;">
            <textarea id="message" onkeypress="javascript:message_onkeypress(event);" ></textarea></td>
            <td style="width:2%;"></td>
            <td style="width:7%;"><input type="submit" name="send" value="Send" id="sendButton"  /></td>
        </tr>
    </table>
</div>

My CSS will be ,

#messageArea {
    padding-left: 16px;
    height: 10%;
    width: 95%;
    background-color: white;
}

#message {
    width: 99.5%;
    height: 49px;
    border: none;
    overflow: auto;
    resize: none;
}

#sendButton {
    width: 100%;
    height: 60px;
    background-color: #5690dd;
    color: white;
}

Good answers will be appreciated.

Upvotes: 2

Views: 5859

Answers (5)

chandru
chandru

Reputation: 1

Try this:

textarea 
{ 
    overflow: auto; 
}

Upvotes: 0

Vignesh Vino
Vignesh Vino

Reputation: 1238

All the versions of IE have a scroll bar on text areas even when they are empty.If you want to remove try this 

CSS

textarea { overflow: auto; }

The scrollbar will return (rightfully) when the text in the textarea expands beyond it's bounds.

EDIT : You can try this for opera

textarea {

resize: none;

}

Upvotes: 0

Pramod Bhoi
Pramod Bhoi

Reputation: 197

You may write like this:

#message{outline:none}

Upvotes: 1

CobaltBabyBear
CobaltBabyBear

Reputation: 2218

Remove border styles from your td element and instead apply it on your textarea and you should be good to go.

<td id="msgvalue" style="width:91%;">
   <textarea id="message" onkeypress="javascript:message_onkeypress(event);" style="border: 1px solid #6495ED"></textarea>
</td>

Upvotes: 0

ahdaniels
ahdaniels

Reputation: 1060

You should be able to remove it using:

textarea:focus, input:focus{
    outline: none;
}

Upvotes: 3

Related Questions