How do I create a text box that displays hint on the right when in focus?
Example : http://www.airbnb.com/rooms/new
(click on the address text box)
It's also possible without javascript.
<input type="text" value="Focus me to see a hint!" style="width: 200px; height: 30px;"/>
<div>Congratulations, you found me !</div>
.input + div {
display: none;
position: relative;
top: -30px;
left: 200px;
}
.input:focus + div {
display: block;
}
Enjoy ;)
Its is simple with placeholder
<input type="text" placeholder = "your gray text" />
Related
I have a textarea and when I click to add some text it starts from the top left corner of the textarea and it seems ugly. Can I change the position where the cursor starts ?
<TextArea
placeholder=' Type your comment here...'
value={comment}
onChange={e => setComment(e.target.value)}
>
</TextArea>
I was able to change the position of placeholder the way below but not the cursor
::placeholder {
color: #C8C8C8;
position: absolute;
left: 15px;
top: 15px;
}
You can use CSS to style a <textarea>. You can change the alignment of the text...
textarea {
display: block;
width: 100%;
text-align: center;
}
<!--
borrowed from
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
-->
<label for="story">Tell us your story:</label>
<textarea id="story" name="story"
rows="5" cols="33">
It was a dark and stormy night...
</textarea>
Or add padding to the element:
textarea {
display: block;
width: 100%;
padding: 15px;
}
<!--
borrowed from
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
-->
<label for="story">Tell us your story:</label>
<textarea id="story" name="story"
rows="5" cols="33">
It was a dark and stormy night...
</textarea>
I'm trying to make a custom file selection button in HTML and CSS.
I've read on the internet that it can be done, hiding the original button and 'drawing' a new one over it, like so:
HTML:
<div class="upload">
<input type="file" class="upload" name="upload"/>
</div>
CSS:
div.upload {
width: 157px;
height: 57px;
background-color: silver;
}
div.upload input {
display: block !important;
width: 157px !important;
height: 57px !important;
opacity: 0 !important;
overflow: hidden !important;
}
And it's working, obviously... but I want only a text, not a image.
So I tried it like this way:
<div class="upload">
Choose File
<input type="file" class="upload" name="upload"/>
</div>
And it won't work when I click on the label. It only works when I click below it.
Why doesn't this work and how can I make this work? I also tried with pointer-events and nothing...
You have to assign your text to your <button>, using a <label> with a for attribute equal to the id of the <input>.
<div class="upload">
<label class="uploadLabel" for="uploadBtn"> Choose File</label>
<input id="uploadBtn" type="file" class="upload" name="upload" />
</div>
In order to completely cover the button with your label, you'll also have to add absolute positioning.
.uploadLabel {
position: absolute;
}
Demo
Why is this necessary?
The event is triggered on your button. This basically means, clicking on a plain text element won't do anything. To trigger a click event on your button, you simply delegate the click on your label to your button.
use an actual label element. that will take care of delegating the click from the container to the input.
set opacity to 0, as you did in your original post (another, more verbose, and arguably more semantic approach will be to position the input absolutely and the label relatively, and set a lower z-index to the input. that will cover the input completely, effectively hiding it — see the second example).
the benefit here is you get clickable area that matches the label surface only, so you can style and set the dimensions to the label alone.
.upload {
display: block;
width: 157px;
height: 57px;
background-color: blue;
}
.upload input {
opacity: 0;
}
<label class="upload">
Choose File
<input type="file" class="upload" name="upload" />
</label>
… and the more verbose approach:
.upload {
position: relative;
display: block;
width: 157px;
height: 57px;
background-color: blue;
}
.upload input {
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<label class="upload">
Choose File
<input type="file" class="upload" name="upload" />
</label>
I need to hide a newsletter form when the user press the sign up button ("Cadastrar" in portuguese) and this is already happening as you may check on my website. However, the success message is rendered with unnecessary line breaks. Why?
I need to fill the entire height of the footer (without fixing the height in the child div, if possible), but the text should be vertically centered in the red box.
You'll probably find easy to check the problem by going to my website, filling the email address field and clicking the button bellow, but here is the HTML rendered there.
<div id="mc4wp-form-1" class="form mc4wp-form mc4wp-form-3571 mc4wp-ajax mc4wp-form-success">
<form method="post" lpformnum="1" _lpchecked="1">
<input type="email" name="EMAIL" class="text" placeholder="Seu email" required="">
<input type="submit" class="bt" value="Cadastrar"><span class="mc4wp-ajax-loader" style="display: none; vertical-align: middle; height: 16px; width: 16px; border: 0px; margin-left: 5px; background: url(/img/ajax-loader.gif) 50% 50% no-repeat;"></span>
<div style="position: absolute; left: -5000px;">
<input type="text" name="_mc4wp_required_but_not_really" value="" tabindex="-1">
</div>
</form>
<div class="mc4wp-response">
<div class="mc4wp-alert mc4wp-success">Obrigado, seu cadastro foi efetuado com sucesso! Por favor verifique seu e-mail.</div>
</div>
</div>
Here is an attempt to reproduce on jsfiddle.
Possible solution add float: left; property to mc4wp-error selector
.mc4wp-error {
background-color: #FEE7ED;
color: #F41952;
border-color: #F41952;
float: left; <----Add this
}
Reason why text is breaking
Newsletter, input and button pushing and breaking the text
Remove float:left from
footer form {
width: 100% !important;
float: left !important; <---Remove this
}
.mc4wp-alert {
position: absolute;
top: 0px;
min-height: 200px;
}
Mobile view and CSS changes max-width:480px
#media (max-width: 480px) {
footer form {
float: left !important; <---Remove this
}
.mc4wp-alert {
position: absolute;
top: inherit;
min-height: 200px;
bottom: -90px;
}
}
If you change:
.mc4wp-alert {
...
...
position: relative;
}
to position: fixed;, you will find that the space is actually occupied by the email text-box and the button. The solution is to use position: absolute;. I tested it in Chrome and IE11.
I have calendar option to select the date. The calendar icon showing in outside of text-box.
<div class="input-prepend">
<input class="span12" type="text" readonly="readonly" id="date" name="date" placeholder="dd-mm-yyyy" />
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
How to show icon span in inside text-box using CSS?
Thanks
make a box/div looking like input box and put calendar icon to left
and insert a input element without border
input{
border: 0 solid #fff !important;
}
Note: use calendar icon in label so when user click on icon it gets focus to input tag
see the example at go to input box in stay in touch
.input-prepend {
display: inline-block;
position: relative;
}
.add-on {
position: absolute;
right: 5px;
top: 5px;
}
I have an input of type button that is used to validate a form an input of type text.
I have seen that, for example, bootstrap lets you append some values to input. I am wondering how would I do append this input of type button into my input of type text.
I have added a screenshot of how I am thinking of it to be, but I am not sure which CSS strategy I would choose.
Thanks
It is nothing but a submit button with a text field
Demo
HTML
<div class="wrap">
<input type="text" />
<input type="button" value="Demo" />
</div>
CSS
.wrap {
display: inline-block;
position: relative;
}
input[type=text] {
padding: 10px;
width: 300px;
padding-right: 60px;
}
input[type=button] {
padding: 2px;
position: absolute;
right: 5px;
top: 5px;
}