Right to left Text HTML input

css input arabic right-to-left
Anand picture Anand · Sep 23, 2011 · Viewed 76.9k times · Source

For my website, i need to provide arabic support. Part of it is to provide input textboxes where when user types in, the new characters have to be appended to the left and the text has to be right aligned.

setting the css property to 

text-align:right

didn't work, as i could not get the cursor to come to the left and add letters there. So I removed that property and added 

direction:RTL

Here, the cursor came to the left and text was right aligned. but the newly added characters were not getting appended to the left. Instead they were getting appended to the right end only.

How do I fix this? please help..

For example, see the google arabic page search box. I need the exact behavior, although not with those fancy keyboard icon etc., http://www.google.com/webhp?hl=ar

Answer

Nicholas Mayne picture Nicholas Mayne · Aug 8, 2014

You can use the dir="rtl" on the input. It is supported.

<input dir="rtl" id="foo"/>

Related questions

How to remove focus border (outline) around text/input boxes? (Chrome)

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using: input { background-color: transparent; …

Read More
Is there any way to change input type="date" format?

I'm working with HTML5 elements on my webpage. By default input type="date" shows date as YYYY-MM-DD. The question is, is it possible to change its format to something like: DD-MM-YYYY?

Read More
How to remove the border highlight on an input text element

When an HTML element is 'focused' (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it. For the layout I am working on, this is distracting and does not look right. <…

Read More