I have the following problem. I made an input form with a height of 5vh (more than default) and when I want to type something inside, typing cursor is centered in the input field. I want to put it at the start of the input field.
Now is like this
I want this
Well I think you should make that a <textarea> tag with the "resize" to be none, like this:
`<textarea placeholder="Your message" style="height:7vh; resize:none;"></textarea>`
I hope this helped..
Related
When all of my inputs are set to "text" it works beautifully.
Example:
https://jsfiddle.net/beckah/62oozn3t/
However when I have additional HTML5 input elements, such as tel or email, my label refuses to float after typing in the field and than making another field active. To test, type in the "email" input and then select another input and type. you'll see that the label doesn't continue to float once not active
Example: https://jsfiddle.net/beckah/8zpd5n46/1/
Any help would be very appreciated.
Thank you.
As pointed out in the comments, your issue is with the :valid selector on your css in this section of code, as well as a few other places.
input.question:focus,
input.question:valid {
padding-top: 35px;
}
Because you are using the :valid selector, and your email or telephone in some cases is not a valid, it collapses, whereas with your text inputs, as long as it is not empty, it will not collapse again.
If you don't want to go through all the hassle of writing JavaScript, you can make it a normal text input and it won't have the # and .com keys available on mobile, but it will work as designed.
To fix this fully, you should check the input via JavaScript, as there is no way in CSS to see if a textarea or input has text inside. You can do this by basically checking to see if the value of the input is not empty, and if it isn't, adjust the css style via javascript with getElementById().style.padding = "35px";
I'm sorry there is no simple solution, but CSS doesn't have anything for inputs like this yet.
I have this text input in a form:
<input type="text" rows="3" />
I am trying to get it to take multiple lines of input. Though the user can only (at the moment) enter text on one line.
How do I make the input more like a textarea, though without the expanding text area icon (bottom right)?
I would like this:
Not this:
<textarea></textarea>
textarea {
resize: none;
}
This link might help you out with the resize issue:
Link
For styling, try google. :)
I'm having an issue getting the text in one of my input boxes to begin at the top of the input box. Instead, it is vertically centered. None of the other solutions on stackoverflow seemed to help.
I've recreated the issue here (ignore how bad the rest of the form looks ;): http://codepen.io/tim1017/pen/ofuhx
And here's the actual page it's located on: http://dev.longviewsources.com/contact/
Thanks!
For multi-line text, which it looks like you're going for, you probably want to use a <textarea>, not a text input tag.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
Also see: Multiple lines of input in <input type="text" />
You're using an input where you should use a textarea. Input elements only support one line of input, thus it is centering that one line vertically. Here's a working fork: http://codepen.io/anon/pen/LBvsd
corrected and forked you can check the css and example;
here
I've got a simple textarea in a form and for some reason when I click in the textarea to begin to type, it centers the first line. I can hit backspace until it lines up at the start of textarea but I don't know why it's doing that. I've Googled and can't seem to find a reason why it would do this. Here is my jsfiddle for it:
http://jsfiddle.net/4cVkn/
I've tried text-align:left in numerous places (inline HTML and CSS) and it doesn't seem to change anything. It seems like it should be a simple fix, thanks for the help.
It isn't centred, it just has a default value of a series of space characters.
Put </textarea> immediately after the start tag instead of filling it with whitespace.
The default content of a text area is the content between its tags. Your source has something like:
<textarea name="bio">
</textarea>
so the initial value of the text area is the newline and the spaces used for indentation – the characters you can backspace over.
To get rid of them, close the tag immediately:
<textarea name="bio"></textarea>
Aside: the kind of form layout you're going for should probably be done using tables – at least until the various shiny new CSS3 layouts are better supported. Your avoiding them actually made the code less readable what with all the <br/>s.
I am developing an app where users can choose the URL of their profile, ala facebook.com/name. Everything worked out fine, except I'm having styling issues adding a static set of text inside the input, to help convey the message of having your own URL.
Here's what I want the input to look like when the user is visiting the page:
And here's what I want it to look like when they add their own input:
Half of this problem is easy, I can just set a large left-padding to the input, get it to display hover effects regardless of where the mouse is and place the input accordingly. But the issue is getting the text into the input line without breaking the styling around it (and preventing the user from being able to select the static text, so that even clicking the static text will "focus" the input field behind it).
I'd really prefer to use pure HTML/CSS, but could use Javascript if it's a must.
Here's where I am now, the goal is to bring the "www.website.com" text into the input field without breaking the styling of the textarea to follow: http://jsfiddle.net/rUkS8/1/
Thanks and sorry for such a long description!
Why not bypass the problem and simply have that static text outside of the input?
www.website.com/<input type="text" name="url" />
This degrades nicely in older/brain dead browsers, works when javascript is disabled, and makes it obvious where the seperate of inputs is.
If you use a label and the for attribute, it will handle the click events for you:
<div style="border:1px solid #000;">
<label for="textinput" style="cursor:text;">asdf</label>
<input type="text" id="textinput">
</div>
If you click on the label, it will send the focus to the input. Putting cursor:text; adds to the effect. All you have to do is play games with size and border and you're all set.