I have few form fields, each input and label is wrapped inside a div in following way:
<div class="field">
<label for="name">Name:</label>
<input type="text" class="input" name="name" />
<p class="hint">Enter your name</p>
</div>
the hint class is initially hidden like display:none.
How can I display the hidden hint class on hover anywhere in class field.
Thanks.
In CSS you can do it the following way:
.hint { display: none; }
.field:hover .hint { display: block; }
Edit: As Karl said, this will not work in Internet Explorer 6. You can, however, resort to JavaScript (in this example using jQuery) to do that:
jQuery(".field").hover(
function() {
jQuery(this).find(".hint").css("display","block");
},
function() {
jQuery(this).find(".hint").css("display","none");
}
);
This option will work in IE 4 and later.
<div class="field" onmouseover="document.getElementById('hint').style.display='none';" onmouseout="document.getElementById('hint').style.display='block';">
<label for="name">Name:</label>
<input type="text" class="input" name="name" />
<p id="hint">Enter your name</p>
</div>
And for your other forms just change the id hint2, hint3, etc.
<div class="field" onmouseover="document.getElementById('hint2').style.display='none';" onmouseout="document.getElementById('hint2').style.display='block';">
<label for="name">Name:</label>
<input type="text" class="input" name="name" />
<p id="hint2">Enter your name</p>
</div>
Related
I spent an hour trying to apply my css to Bootstrap input of type text inside a form. Here's my code:
<form>
<div class="form-group">
<input type="text" name="username" value="" id="username" class="form-control" />
</div>
</form>
input [type=text] {
background-color: red !important;
}
The strange thing is that if I remove the [type=text] part, then all is ok.
JSFiddle
You have to remove the space between input and [type=text]:
input[type=text] {
background-color: red !important;
}
<input type="text"/>
<input type="password"/>
Your background spelling is wrong and remove space.
input [type=text] {
barckground-color: red !important;
}
so make sure you type correct.
input[type=text] {
background-color: red !important;
}
hi try this one hope i can help you:
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
<input type="text" name="username" placeholder="input username">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
<input type="text" name="password" placeholder="input password">
</div>
</form>
I came across an interesting issue when trying to use html5's form size/maxlength and bootstrap.
The size is overridden by boostrap's .form-control class, but removing it causes the input to lose its styling.
Code pen : http://codepen.io/rkhayat/pen/JoeBqx
Thanks
<div class="container">
<div class="form-group">
<p>Phone</p><input class="form-control" id="inputPhone" maxlength=
"3" name="phone" required="required" size="3" title="" type="tel"
value="">
</div>
</div><!--with form-control-->
<div class="container">
<p>Notice that removing form-control loses ALL styling, but keeps the
size from html size input</p>
</div>
<div class="container">
<div class="form-group">
<p>Phone</p><input id="inputPhone" maxlength="3" name="phone"
required="required" size="3" title="" type="tel" value="">
</div>
</div><!--without form-control-->
Edit: Researching I have found this http://getbootstrap.com/css/#column-sizing
Implemented bootstrap's recommended fix, feels like a hack.
<div class="col-xs-4">
<div class="form-group">
<p>Phone</p>
<div class="col-xs-3">
<input type="tel" name="phone" class="form-control" value="" size="3" maxlength="3" required="required" title="">
</div>
<div class="col-xs-3">
<input type="tel" name="phone" class="form-control" value="" size="3" maxlength="3" required="required" title="">
</div>
<div class="col-xs-4">
<input type="tel" name="phone" class="form-control" value="" size="4" maxlength="4" required="required" title="">
</div>
</div>
</div>
I use am using cols to size width of lots of form elements (particularly whole form-groups). I just call them class="skinny" and then add:
.skinny{
padding-left:0;
}
Works fine for me so far. have not tried for maxlength but this solve my major layout headache!
Update This question has been viewed a lot, here's a blog post I wrote about it!
http://blog.dnwebdev.com/index.php/2015/07/28/my-bootstrap-toolbelt-phone-number-input/
Fixed it with the following if anyone is interested. Thank you #web2tips for your input. (Refer to question for html)
.phone-number .col-xs-3::after{
content: "-";
position:absolute;
right: 5px;
color: black;
border: 0px solid;
top: 5px;
}
.phone-number .col-xs-4{
width:25%;
}
.phone-number .col-xs-3, .phone-number .col-xs-4{
padding-left:0;
}
It's a shame that bootstrap's .form-control has width built in though.
If i have a multiple input type text and i wants to show only 3 top .
I used this html and css. but hide fail.
http://jsfiddle.net/naresh_kumar/qecCC/
HTML
<div id="urlLinksInput">
<p>
<input id="inputurl0" name="inputurl[]" type="text" class="txtinput">
</p>
<p>
<input id="inputurl1" name="inputurl[]" type="text" class="txtinput">
</p>
<p>
<input id="inputurl2" name="inputurl[]" type="text" class="txtinput">
</p>
<p>
<input id="inputurl3" name="inputurl[]" type="text" class="txtinput">
</p>
<p>
<input id="inputurl4" name="inputurl[]" type="text" class="txtinput">
</p>
</div>
CSS
#urlLinksInput p input:nth-child(n+3) { display: none; }
#urlLinksInput p:nth-child(n+3) input {
display: none; /* ^----this must be here,as <p> has only ONE child,
and that is <input>*/
}
demo
Use the HTML5 hidden attribute:
<input type="text" hidden>
...with this fallback CSS for non-supporting browsers:
[hidden] {
display: none;
}
Demo
Edit
Even better use input[type=hidden]. It works just like a text input, and you can interact with it via JavaScript, yet it's hidden:
<input type="hidden">
Im using jQuery Mobile and I have a horizontal toggle set.
I would like to center it in the page, or I would like to stretch it so that it takes up 100% of the width.
Either would be good for what I am doing.
I have tried a lot of different approaches but none have worked so far.
Using jQuery Mobile v1.0
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="monday" id="monday" class="custom"/>
<label for="monday">Monday</label>
<input type="checkbox" name="tuesday" id="tuesday" class="custom" />
<label for="tuesday">Tuesday</label>
<input type="checkbox" name="wednesday" id="wednesday" class="custom" />
<label for="wednesday">Wednesday</label>
<input type="checkbox" name="thursday" id="thursday" class="custom" />
<label for="thursday">Thursday</label>
<input type="checkbox" name="friday" id="friday" class="custom" />
<label for="friday">Friday</label>
<input type="checkbox" name="saturday" id="saturday" class="custom" />
<label for="saturday">Saturday</label>
<input type="checkbox" name="sunday" id="sunday" class="custom" />
<label for="sunday">Sunday</label>
</fieldset>
I just had this same problem and I solved it by adding by putting the fieldset within a div which has text-align: center and then setting the display of the fieldset to inline.
E.g.
HTML
<div class="custom">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="monday" id="monday" />
<label for="monday">Monday</label>
...
</fieldset>
</div>
CSS
.custom {
text-align: center;
}
.custom fieldset {
display: inline;
}
Setting the display of the fieldset to inline may have some other effects, for example I noticed that the margins/padding changed slightly, but apart from that it did what I wanted.
I have input text's and label tags. I can't figure out the CSS to get the label text to align right below the input text. Here's a snippet of the HTML:
<form id="sg1">
<label for="member1">member 1</label>
<input name="member1" id="member1" value="jack" />
<label for="member2">member 2</label>
<input name="member2" id="member2" value="carter" />
<label for="member3">member 3</label>
<input name="member3" id="member3" value="jackson" />
<label for="member4">member 4</label>
<input name="member4" id="member4" value="tielk" />
</form>
Trying to get:
[input box 1] [input box 2]
label 1 label 2
etc, with all elements.
A quickly whipped up example that works:
input {
display: inline-block;
width: 6em;
position: relative;
top: -3em;
}
label {
display: inline-block;
width: 6em;
margin-right: .5em;
padding-top: 1.5em;
}
<form id="sg1">
<label>member 1 <input name="member1" id="member1" value="jack" /></label>
<label>member 2 <input name="member2" id="member2" value="carter" /></label>
<label>member 3 <input name="member3" id="member3" value="jackson" /></label>
<label>member 4 <input name="member4" id="member4" value="tielk" /></label>
</form>
Could be improved, but I find it cleaner than extraneous divs, and it degrades much nicer than the label-after-input-approach when CSS support is absent. Personally, I prefer to nest the inputs in the labels anyway.
Use a table (one input/label pair per cell) or left-floating divs (one input/label pair per div). Example:
<div class="pair">
<input type="text" name="foo" value="bar" /><br />
<label for="foo">shabba</label>
</div>
<div class="pair">
…
</div>
CSS:
div.pair {
float:left;
}
You'd make the job a lot easier by wrapping each field (in this case, each input/label pair) in a div.
You can use pure css to get this to achieve what you want, but it requires a lot of adhoc positioning stuff that you're better off not doing.
The simplest way is to put the label beneath the input on the html:
<form id="sg1">
<input name="member1" id="member1" value="jack" />
<label for="member1">member 1</label>
<input name="member2" id="member2" value="carter" />
<label for="member2">member 2</label>
<input name="member3" id="member3" value="jackson" />
<label for="member3">member 3</label>
<input name="member4" id="member4" value="tielk" />
<label for="member4">member 4</label>
</form>
Then you can wrap each input/label pair with a div, and set the div like so:
<form id="sg1">
<div class="wrap">
<input name="member1" id="member1" value="jack" />
<label for="member1">member 1</label>
</div>
<div class="wrap">
<input name="member2" id="member2" value="carter" />
<label for="member2">member 2</label>
</div>
<div class="wrap">
<input name="member3" id="member3" value="jackson" />
<label for="member3">member 3</label>
</div>
<div class="wrap">
<input name="member4" id="member4" value="tielk" />
<label for="member4">member 4</label>
</div>
</form>
#sg1 div
{
clear: both;
float: left;
}
Next you can put
#sg1 label
{
float: right;
}
input
{
display:block;
}