I am trying to get my placeholder text to wrap to the next line on an input field. I found examples on how to do this and it's working in Chrome but not Firefox.
This is the Stack Overflow question I took my code from:
Placeholder auto wrap inside a input field
That works for Chrome but not Firefox. I know my pseudo element is working because when I do something else obvious (i.e. color: red), that does change the input text. I am looking for help on the wrap stylings specifically.
::-moz-placeholder {
white-space:pre-line;
position:relative;
top:-7px;
}
(This doesn't work in FF)
::-webkit-input-placeholder {
white-space:pre-line;
position:relative;
top:-7px;
}
(This does work in Chrome)
I am looking to get the input placeholder to wrap down to the next line and not get cut off.
As far as I know Mozilla Firefox removed the ability to wrap the placeholder. The placeholder element is extremely tricky and technically not that well supported.
A solutions can be to remove placeholders entirely and rely on another option. Here's an article about (not) using the placeholder and its alternatives from Smashing Magazine.
Related
My national script is written vertically, aligned from left to right.
I need to customize text alignment of textarea for this requirement.
By default, text in the textarea is written horizontally, aligned from top to bottom. I attached a picture of my national script with this post.
Any idea how I do this? How do I customize text alignment of text area?
Sorry for my poor English.
I think you mean the writing mode rather than alignment: you would need to have text presented by browsers so that text runs vertically in a line, from top to bottom, and with lines laid out from left to right.
This appears to be impossible at present. However, you might achieve the desired effect in some browsers using an editable div element instead of textarea.
According to the CSS Writing Modes Module Level 3 draft, you could set simply writing-mode: vertical-lr. It seems that there are no implementations yet, but IE has had its own version of this, with differently named values for the property, and Chrome now supports the property but only with a vendor prefix.
However, although there is thus some browser support for the setting in general, it seems that it does not work for textarea: in IE, the text runs vertically but lines run from right to left, with the first line placed at the right of the area; and in Chrome, the text runs horizontally. The reason is probably that textarea elements have a special implementation that conflicts with the implementation of writing mode.
Sample code (you may need to tune font settings to use a font that contains Mongolian letters to see this):
<style>
div,
textarea {
writing-mode: tb-lr;
-moz-writing-mode: vertical-lr;
-webkit-writing-mode: vertical-lr;
writing-mode: vertical-lr;
}
</style>
<textarea rows=7 cols=7>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ ᠤᠯᠠᠭᠠᠨᠪᠠᠭᠠᠲᠤᠷ</textarea>
<div style="width: 5em; height: 4em; border: solid blue 1px">
ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ ᠤᠯᠠᠭᠠᠨᠪᠠᠭᠠᠲᠤᠷ
</div>
So in my test, the div looks OK in IE and in Chrome, but the textarea doesn’t. So maybe you could use <div contenteditable> with some JavaScript that copies the div content to a hidden field upon form submission (if this is for a form to be submitted to server-side processing).
This is how it works on IE:
Well, Firefox 38 can support writing-mode: vertical-lr without any prefixes, but you must enable this parameter in about:config page: layout.css.vertical-text.enabled.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
When I use text-ident property in CSS, what I expect to see is when you focus into the text input area, the text cursor icon/caret will appear indented. But it appears as if it isn't indented until you type for first character. The only work around is to use left padding on the input element, but I want to avoid using padding because I am also setting a width and don't want to have to implement a padding fix for IE using an IE specific spreadsheet.
This bug happens in Safari.
See below for images of what I'm talking about.
On focus when there is no text, the text-ident doesn't affect the caret position:
When you start typing, it indents correctly:
After you type and then delete what you've typed, it displays what I want it to do from the beginning (indent the caret).
HTML:
<input type="text" />
CSS:
input { text-indent: 10px; }
It's a confirmed WebKit bug that has recently been resolved https://bugs.webkit.org/show_bug.cgi?id=82688
Your version of Safari may be too old for this fix to be included.
Use padding-left instead.
<style>
::-webkit-input-placeholder {text-indent:10px!important;}
:-moz-placeholder { text-indent:10px!important;}
::-moz-placeholder {text-indent:10px!important;}
:-ms-input-placeholder {text-indent:10px!important;}
</style>
This allows the text indent to focus indented, which I believe has been fixed in newer versions of webkit / safari. However, this fix should help you out with the older versions.
Thanks
I have a footer, below a textarea, containing a list and two buttons (all inline) within a div with the id #share-something. For some reason it is placed differently in Internet Explorer. I want it to look the same in IE as it does in Chrome. What am I doing wrong? http://jsfiddle.net/h3twR/
Oddly enough, IE7 seems to be fine for me, but 8 & 9 are off. If you have an IE-only stylesheet (using conditional comments), you can add this:
#share-something-container textarea {
margin-bottom: 5px;
}
*:first-child+html #share-something-container textarea {
margin-bottom: 0px; /* targets ie7 and undoes the margin above, as IE7 is okay */
}
This doesn't explain why 8 & 9 behave differently, but I've long since given up looking for logic and reason in IE.
There seems to be some kind of difference between IE8/9 and the other browsers and how they're rendering TEXTAREA.
It looks like you just have to set TEXTAREA to display block. It seems some browsers behave differently in this situation as they will see all elements as inline and generate extra white space. However, setting it to display:inline doesn't seem to have the reverse effect, so it's weird like that.
Here's a solution:
http://jsfiddle.net/h3twR/2/
I simply added this:
#share-something-container textarea {
...
display:block;
margin-bottom:5px;
}
And it appeared to render more consistently. IE7 seems to be off a little bit more. But hopefully this helps a little.
Cheers!
I’m trying to build a jQuery plugin that fakes the HTML5 placeholder attribute (like What is the most accurate way to emulate the "placeholder" attribute in browsers that don't support it natively?). To do this I’m inserting a <span> before the appropriate <input> or <textarea> and duplicating the styling.
Unfortunately, I’ve discovered that browsers magically place the text differently in <input>s than <span>s or <textarea>s, as demonstrated by http://jsfiddle.net/63zcD/1/—the text is vertically centered in the <input>, even though Web Inspector says the styling is identical across all three. The effect appears in Safari, Chrome, and Firefox.
Tricks that haven’t worked:
vertical-align: middle;, vertical-align: text-bottom;
display: inline-block;
Twitter’s login page fakes the placeholder attribute, but they get around this problem by wrapping the <span> and <input>/<textarea> in a containing <div> and manually styling the <span> for a visual match, which isn’t an option for a plugin that needs to run automatically.
Assigning a line-height that is equal to the element height should work. See this fork of your original fiddle, so to speak: http://jsfiddle.net/pygPs/.
A quick browser check showed it rendering properly in IE 9, IE 6, as well as the latest Mac versions of Firefox, Chrome, and Safari. I didn't change any of the existing CSS from the original link, just added one line:
height: 26px;
line-height: 26px; /*added this line*/
Whenever we select some text, the entire text area gets highligted. like this .
but is there any way to do away with this highlighting? I want just the color of the text to change and not the area to be highlighted as it appears in the image? am I clear enough?
Depends on which browsers you need to support. Not sure if Internet Explorer does support it, but here are the three CSS pseudo-elements you can try:
::selection (works in my Chrome)
::-moz-selection
::-webkit-selection
For example:
p::selection {
background:#cc0000;
color:#fff;
}
Also see http://www.quirksmode.org/css/selection.html
If you're talking about when someone selects the text in the browser (using the mouse or shift-selecting) then this isn't possible.
[UPDATE]
I take it all back - as #Dev F and #nico say, there's a selection CSS3 property. (Of course only some browsers will support this, but...)