This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Jquery growing and shrinking textarea
I want to achieve an effect where a text <input> will grow vertically when the text overflows. So instead of the beginning text being scrolled off, a new line starts, and the <input> grows vertically.
How could I achieve this using Javascript/jQuery/CSS/HTML/etc?
You probably can use an autogrowing textarea styled as an input - DEMO
textarea {
height: 20px;
line-height: 20px;
resize: none;
}
There are numerous plugins exists to achieve the same effect - I used this for the demo.
A pure Javascript way:
<textarea onkeyup="while(this.scrollTop > 0) {this.rows++;}"></textarea>
Related
I have a textarea field, which I would like to automatically adjust according to number of lines used (i.e., if the user enters one line, the field height will show that line only, but if the user enters a long text, the field will show all the lines of text).
I would like it to happen dynamically, without using scroll (overflow).
I would appreciate help with this.
thanks
There are lots of ideas given in the answers pointed to in the comments so if you absolutely have to stick with textarea perhaps some of them will solve your problem but they require Javascript and I notice you have tagged CSS not JS.
So, have you considered using a contenteditable div instead? This will automatically resize depending on content without needing Javascript:
.input {
overflow: auto;
border: 1px solid black;
}
<div class="input" contenteditable></div>
This question already has answers here:
Using external images for CSS custom cursors
(5 answers)
Closed 6 years ago.
Second example work, the hand did show up, but why the first div doesn't work?
div {
cursor: url('http://i.imgur.com/EuDeZWn.png'), auto;
}
span {
cursor: url('http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif'), auto;
}
<div>
target
</div>
<br>
<br>
<span>
target 2
</span>
From MDN:
In Gecko (Firefox) the limit of the cursor size is 128×128px. Larger cursor images are ignored. However, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms.
You image is 237 x 173, which is significantly larger.
This question already has an answer here:
Making image positioned on textbox clickable in case of ipad (Creating HTML5 Search input type for iOS)
(1 answer)
Closed 9 years ago.
I have a following scenario but i dont know how to add the text followed by image and text followed by image and so on. Please refer the image below and that is an input text with values
How do i achieve this using jquery and css?
If possible show it in js fiddle
Thanks in advance
Try this:
HTML:
<input type="text" name="whatever" id="funkystyling" />
CSS:
#funkystyling {
background: white url(/path/to/icon.png) right no-repeat;
padding-right: 17px;
}
Example:
http://jsfiddle.net/markom/5Ayx7/
please help me to scroll text in a html input text field using css or jquery on android device.
I already tried with overflow: auto; and using iscroll.
If you want scrolling textboxes than you are doing it in a wrong way, if you want scroll, use textarea instead of input type=text, even if it's possible, don't do it, it's just wrong approach.
As far as the area is concerned, if you want to have input type text looks for your textarea you can use
textarea {
height: 30px;
resize: none;
}
Demo
This question already has answers here:
Google Chrome > Textboxes > Yellow border when active..?
(2 answers)
Closed 10 years ago.
I am trying to make a form for my website and there is two problems that i am facing
the first problem is when i put an input for example :
<textarea cols:40 rows:50></textarea>
If you clicked on that in chrome the border-color will change into orange and in safari it will change into blue so how can i stop the color changing in border?
Remove the outline:
textarea {
outline: none;
}
Bear in mind, though, that the outline is used to indicate the focused form-field, which may be useful as an accessibility aid to some disabled/limited-vision users; it's always worth making an effort to replace the default visual cue with another, that fits your theme, whether by changing the color of the outline or by using background-color on the element itself.
Also your HTML is malformed, it should be:
<textarea rows="50" cols="40"></textarea>
References:
outline.
You need to remove outline on focus:
textarea:focus {
outline: none;
}