I wanted to create a small form with some checkboxes which are only visible when the mouse cursor hover this container.
The hover effect and the container inside are no problem.
But there are more elements after that checkboxes and when I hover every element below is moving down because the container with the checkboxes has a height. But when I say no height:auto or 100% when I hover then I can't reach more then one checkbox.
<form>
<input type="text" name="something">
<div class="cb-container">
<input type="checkbox" name="first" value="first">
<input type="checkbox" name="second" value="second">
<input type="checkbox" name="third" value="third">
</div>
<input type="submit">
</form>
<style type="text/css">
.cb-container {
height:25px;
overflow:hidden;
position:relative;
z-index:1;
}
.cb-container:hover {
display:block;
height:auto;
overflow:visible;
position:relative;
z-index:1;
}
</style>
Some opening animation would be nice, but that is another task for me.
For the first I would like to understand why I can't open the container over e.g. the submit button instead of pushing him down.
This may help you ! http://jsfiddle.net/13cjn242/
.cb-container {
height:25px;
opacity:0;
}
.cb-container:hover {
opacity:1;
}
Related
I have a form whose submit input button has a background-image and is shifted left over the top of the input field:
This works in all current browsers. My problem is that it also needs to work in IE8 on Windows XP (!), and it doesn't. When you hover over the input (the magnifying glass), the pointer does not change, and the button is not clickable. Any ideas where I'm going wrong please?
HTML:
<form id="" action="" method="post">
<label for="search">Search</label>
<input type="text" id="search" name="search" value="" />
<input type="submit" name="searchsub" class="searchsub" value="" />
</form>
CSS:
#search {
width:222px;
height:36px;
padding-left:223px;
padding-right:10px;
float:left;
}
input.searchsub {
width:23px;
height:23px;
float:left;
background-image:url(../images/magnifier.jpg);
margin:8px 0 0 -32px;
border:0;
cursor:pointer;
}
This is a start: (demo: http://jsfiddle.net/KYL3A/)
I removed your floats and added a div as a "border wrapper". I think this will make IE8 play :) though I couldn't test it myself as I don't have IE8
<form id="" action="" method="post">
<div id="searchwrap">
<label for="search">Search</label>
<input type="text" id="search" name="search" value="" />
<input type="submit" name="searchsub" class="searchsub" value="" />
</div>
</form>
CSS
#searchwrap {
display: inline-block;
border: 1px solid #333;
padding: 0 10px;
}
#search {
width:150px;
height:36px;
border:0;
}
input.searchsub {
width:23px;
height:23px;
background:red url(); // added red as i dont have your image
margin:8px 0 0 0px;
cursor:pointer;
}
If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the and tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.
Therefore this would not work in the web browser you are saying (IE + XP) because that browser does not support it. There is no problem in your code. So i would say that just leave it like this, because there would not be many users of your website who are running Internet Explorer on XP but if there are many then you may want to put some text in there.
Source:
The first answer on this page and this source
So Im trying to style my radions buttons with a background image so the entire radio button is just an image. When the button has been pressed I want to change the url of the background image. Is this possible?
HTML
<form method="POST" action="scripts/rate.php">
<label for="star" class="star">
<input type="radio" name="rating" value="star1">
</form>
CSS
input.star
{
width:32px;
height:32px;
}
label.star
{
width:32px;
height:32px;
background-image: url('star-grey.png');
}
This is what you need:
<input type="radio" name="rGroup" value="1" id="r1" checked="checked" />
<label class="radio" for="r1"></label>
Hide by css your radio buttons:
.radios input[type=radio]{
display:none
}
And style the label as you want to. I created a simple jsfiddle that fully demonstrate how to use your radio buttons without having the default look. Instead, it is jut a little colored square that changed when it is checked.
Here is the jsfiddle
I have a form inside a #main div, I want all the label to be on the left, and all the input area to be on the right.
So i have these CSS:
.right{
float:right;
}
#main{
width:80%;
}
textarea{
resize:none;
}
and the HTML:
<div id="main">
<form name="form1">
<div>
<label for="name">Name</label>
<input type="text" name="name" class="right">
</div>
<div>
<label for="description">About you</label>
<textarea name="description" class="right"></textarea>
</div>
<div>
<label for="location">Location</label>
<input type="text" name="location" class="right">
</div>
<input type="submit" value="Submit">
</form>
</div>
but the textarea doesn't want to go on the right, plus the inputs are going through the divs
here a jsfiddle:
http://jsfiddle.net/malamine_kebe/ZE7tp/
You need to include a float:right to the textarea.
Updated approach here: http://jsfiddle.net/nbrLJ/
Also include a clear:both to the div's.
Tip - you can target the form elements without a new class name, for example:
div.row input,
div.row textarea {
float:right;
}
Adding a width to the parent container will also help:
#main {
width:300px;
}
I'm no expert but I think you need to clear your floats
.clearfix {
clear: both
}
http://jsfiddle.net/ZE7tp/2/
Your inputs are running into each other. Notice they are pushing each other to the left. Set margins to give it some breathing room.
div {
margin: 3em 0;
}
http://jsfiddle.net/ZE7tp/3/
Is it possible to style an active label with just CSS using the following markup:
<label class="inputOption" for="1"><input type="radio" name="radio1" id="1" /><span class="aText">Option 1</span></label>
I want to add some background styles to the label once the radio inside is selected. Prefer not to use javascript. It is for mobile so it doesn't have to work on older browsers.
For this your can use CSS :checked property for this. Write like this:
#one{
position:relative;
}
#one:checked + span{
display:inline-block;
margin-left:-20px;
padding-left:20px;
background-color: #aa2233;
}
check this http://jsfiddle.net/5TxyJ/5/
Of course, you should add also a second class, let`s say "active" to the label, only when the radio button is selected:
<style type="text/css">
label.active {
background-color: #aa2233;
}
</style>
<label class="inputOption active" for="1"><input type="radio" name="radio1" id="1" /><span class="aText">Option 1</span></label>
See here.
my html:
<input type="text" value="" id="email1" class="inputfield_ui" />
<label>Email address 1</label>
my inputfield css:
width:95%;
z-index:3;
my label css:
position:absolute;
display:block;
top:8px;
left:11px;
color:#CCCCCC;
z-index:1;
when i try to click on the label to enter something it wont allow me to do this... instead will show a default cursor and i will have to click next to the other space of the textfield to write something...
z-indexes are correct , arent they?
EDIT: SOLUTION
html:
<input type="text" value="" id="email1" class="input" />
<label>Email address 1</label>
<span class="input_bg"></span>
css:
input{
background:transparent;
z-index:1;
}
label{
z-index:2;
}
.input_bg{
/*input css with background*/
z-index:3;
}
I'm assuming this is for the purpose of a textbox watermark?
If this is the case, then I would use CSS to hide the label (don't remove it for accessibility purposes):
label
{
display:none;
}
Then use a javascript tool to display the watermarked text. There are a lot of good jQuery solutions for this:
http://code.google.com/p/jquery-watermark/
It's then a case of applying something like:
$("#email1").watermark("Email address 1");
However, this can be improved, so that you don't have to apply this for every single element by doing something like:
$(".watermark").watermark($(this).attr("title"));
Alternatively, if all your input's have associated labels, you can apply them like this:
$(".watermark").watermark($("label[for='" + $(this).attr("id") + "']").html());
This way if the user doesn't have javascript enabled, theres still the title to rely on, and if they don't have CSS, then the label will be shown.
z-index doesn't work without positioning. Try to add position:relative; to the input input CSS.
html:
<input type="text" value="" id="email1" class="input" />
<label>Email address 1</label>
<span class="input_bg"></span>
css:
input{
background:transparent;
z-index:1;
}
label{
z-index:2;
}
.input_bg{
/*input css with background*/
z-index:3;
}