how to disable(not show) text behind an background image of textbox

I have a text box with back ground image with right align when the tex

Page 1 of 1

2 Replies - 3638 Views - Last Post: 24 March 2009 - 10:38 PM

#1 sutr_kam   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 15-February 09

how to disable(not show) text behind an background image of textbox

Posted 23 March 2009 - 04:24 AM

I have a text box with back ground image with right align when the text is bigger then the text is showing behind the image how to disable(i.e. not show) this text
style is 
.abcstyle{
		background-image:url('../Images/downArrow.gif');
		background-repeat: no-repeat;
		background-position: right;
		padding-left: 0px;
		text-align: left;
		background-attachment: fixed;
	}
code is 
<table border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
	<td valign="top">
		<input type="text" name="abc" id="abc" 
		class="abcstyle" size="11" value="This is the bigger text in the	text  box" style="width:198px" readonly>
	</td>
</tr>
</table>


if the text length is less than the text box then there is no problem
but if the text is bigger (generally in my context it will be bigger)
then the text is showing behing the background image of textbox

How can I set the background of the image is not transparent?
i.e.
what i have to do to not show text behing background image of the textbox

Attached image(s)

  • Attached Image

This post has been edited by sutr_kam: 23 March 2009 - 04:28 AM


Is This A Good Question/Topic? 0
  • +

Replies To: how to disable(not show) text behind an background image of textbox

#2 gregwhitworth   User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: how to disable(not show) text behind an background image of textbox

Posted 23 March 2009 - 08:09 AM

Add a padding to your text box of the width of your arrow + a little for spacing. So if your dropdown arrow is 5px in width, make the padding 7px:

.abcstyle{
		background-image:url('../Images/downArrow.gif');
		background-repeat: no-repeat;
		background-position: right;
		padding-right: 7px;
		text-align: left;
		background-attachment: fixed;
	}


Was This Post Helpful? 0
  • +
  • -

#3 sutr_kam   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 15-February 09

Re: how to disable(not show) text behind an background image of textbox

Posted 24 March 2009 - 10:38 PM

sorry gregwhitworth,
I have tried what you have given but it is not working for me.
Actually If the text size is less then the right padding is working properly.
But in my case it is not working
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1