How to insert image in the textbox on the right side in XUL?

Question

I'm able to add the image icon inside the textbox XUL element in my firefox addon, but this icon is appearing in the left side of textbox and I'm unable to a align the icon on the right side.

Here is the code:

<textbox>
    <image src="chrome://myextension/skin/icon.png"/>           
</textbox>

I tried to put the image in the hbox and applied align=right but no success. But I'm sure this is possible for eg urlbar-icons and searchbar-icons but I don't know how to implement this is normal textbox. Please tell me how to do so?

Answer 1

If you look at it using DOM Inspector you will see some anonymous content being generated for the <textbox> tag (the actual input field) and your image being inserted before it. You cannot change the insertion point. However, you can use -moz-box-ordinal-group CSS property to make your image be displayed after the input field (which has the default -moz-box-ordinal-group: 1 value):

<textbox>
    <image src="..." style="-moz-box-ordinal-group: 2;"/>
</textbox>

Note that -moz-box-ordinal-group will be renamed into box-ordinal-group once the corresponding standard becomes more mature.

Answer 2

尝试在文本框中使用align = end属性： https : //developer.mozilla.org/en/XUL/Attribute/align