I have a basic HTML page with two input fields, one text and one button. When the textfield has the focus I want the button to be hidden. I have it working fine providing I do not add any more HTML code (which I wish to do) between the two input tags.
I know I could do this with jQuery but ideally I would prefer a CSS based solution.
<style>
input[type="text"]:focus + input[name="submitButton"]{
visibility: hidden;
}
</style>
<input type="text" />
<input type="submit" name="submitButton" />
If I add the additional two statements between the two tags it fails to work.
<input type="text" />
<br/><br/>
<input type="submit" name="submitButton" />
I know I could use jQuery but i would prefer a CSS solution.
Thanks.
man... i solved your problem
HTML
<input type="text" />
<br/><br/>
<input type="submit" class="btn" name="submitButton" />
CSS
input[type=text]:focus ~ input[type=submit]
{
visibility:hidden;
}
vote if it helps
Target the submit button with a class... dont give input[name,=""]
.
Instead give classname... i think + selector is the problem.. it is searching for immediate adjacent input tags..and it fails to fetch becoz of br tag inbetween....
So target with classname
You can keep your CSS and add the line break spacing for the text field in CSS. See an example without having to use<br> tags.
input[type="text"]:focus+input[name="submitButton"] {
visibility: hidden;
}
input[type="text"] {
display: block;
margin-bottom: 15px;
}
<input type="text" />
<input type="submit" name="submitButton" />
Related
on this page: http://growthbay.ch/
I have a small email field plus subscribe button embedded, but I would like to show the subscribe button right next to the email input field with a bit of a margin to the left of the subscribe button.
I am using this code:
<label><strong>Get the latest jobs in your inbox!</strong></label>
<input style="width:auto !important" type="email" name="EMAIL" placeholder="your#email.com" required />
<input display="inline-block" position="relative" margin-left="5px" vertical-align="top" type="submit" value="Subscribe" />
What am I doing wrong?
thanks folks!
Sandro
Try display: inline-block; instead of display:block from your css
I believe you missed display: inline-block on the email field. Just add it, and it should work!
Also (albeit not related to your problem), you did not apply styles to the "Subscribe" button in the correct way: what you have is
<input display="inline-block" position="relative" margin-left="5px" vertical-align="top" type="submit" value="Subscribe"/>
while it should be:
<input style="display: inline-block; position: relative; margin-left: 5px; vertical-align: top;" type="submit" value="Subscribe"/>
In general, however, I recommend using external CSS and referencing your element with classes.
Let me know if it worked!
I have submit and reset buttons for a form, and I cant for the life of me figure out how them to get under the textbox. And then the address element is displaying on the right side aswell.
<label id="warranty">
<input type="checkbox" name="warranty" />
Yes, I want the 24-month extended warranty
</label>
<label for="request" id="request">Any special requests on your order?</label>
<textarea name="request" id="request"></textarea>
<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />
</form>
CSS:
input[type="submit"], input[type="reset"] {
display: inline-block;
width: 150px;
float: inline;
}
Surely I'm missing something right?
CSS
#request { display: block; clear: both; }
Working Fiddle
How about a line break after the textarea?
ie:
<label for="request" id="request">Any special requests on your order?</label>
<textarea name="request" id="request"></textarea>
<br />
<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />
or via css, you could make the first of the 2 buttons clear any previous floats;
input[type="submit"] {
clear: both;
}
Instead of display: inline-block; try display: block; for either your text area (doing this will say "put nothing else on the the same line as this element unless it floats", or for your submit order and cancel buttons.
I'd also suggest putting your two buttons inside of a wrapper div so that way you can manipulate the position of those two buttons as a unit instead of individually.
Also, one last note: don't have more than one element on a page with the same id. For elements you want to apply the same properties to, make the id a class instead.
You can use a div to wrap them.
I don't see "address element", so I can't help you.
<div>
<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />
</div>
You can try this working fiddle!
<form>
<label id="warranty">
<input type="checkbox" name="warranty" />
Yes, I want the 24-month extended warranty
</label>
<label for="request" id="request">Any special requests on your order?</label>
<div class="clear:both"></div>
<textarea name="request" id="request"></textarea>
<div class="clear:both"></div>
<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />
</form>
I have HTML tag in my JSP page like this:
<form action="updateaddr" method="post">
<p>
<label>
电话：
<input type="text" name="phoneNumber" value="${person.phoneNumber}"/>
</label>
</p>
<p>
<label>
密码：
<input type="password" name="password"/>
</label>
</p>
<input type="submit" value="注册"/>
</form>
Then below the form tag, I am trying to put button that would redirect to another page.
<a href="personal?id=${id}">
<button>返回</button>
</a>
I want to place this button next to
<input type="submit" value="注册"/>
Currently it is placed below this when running Tomcat.
I appreicate if someone could help me.
http://jsfiddle.net/isherwood/w9SGz
Just put the link inside the form.
...
<input type="submit" value="注册" />
<a href="personal?id=${id}">
<button>返回</button>
</a>
</form
UPDATE: You'd need to give the button a type to prevent oddness: http://jsfiddle.net/isherwood/w9SGz/2
Jukka is correct that this could be considered invalid markup, and I know for a fact that some browsers don't like it. I agree that styling a link as a button is a better approach. However, that wasn't the question.
If you don't want to do that, negative margins may help, though it's a bit finicky and fragile:
http://jsfiddle.net/isherwood/w9SGz/1
#myButton {
margin-left: 50px;
margin-top: -26px;
display: block;
}
You could use JavaScript and place it within the form element:
<input type="submit" value="注册"/>
<button onclick="window.location.href='personal?id=${id}'">返回</button>
</form>
This works fairly consistently across browsers that have JavaScript enabled
Can someone explain how I can modify the second input id shown below so that it is not visible on the page and also does not take up any space on the page?
<section>
<label for="muni">Municipality</label>
<div>
<input id="county_select" type="text" />
<input id="county_no" type="text" value="" disabled="disabled" style="visibility:hidden" />
</div>
</section>
Currently, this second input id takes up space on my form and I don't want it to take up any space. Thank you.
Use display: none;, as shown:
<input id="county_no" type="text" value="" disabled="disabled" style="display: none;" />
Reference:
The CSS display property.
display:none in stead of visibility:hidden
Use the style="display:none;" instead of visibility:hidden
visibility:hidden leaves space.
You can style the input using CSS, targeting it via its id tag.
In your .css file:
#county_no {
display: none;
}
Styling HTML inline should be avoided.
I'm writing a web service, and I want to return the data as XHTML. Because it's data, not markup, I want to keep it very clean - no extra <div>s or <span>s. However, as a convenience to developers, I'd also like to make the returned data reasonably readable in a browser. To do so, I'm thinking a good way to go about it would be to use CSS.
The thing I specifically want to do is to insert linebreaks at certain places. I'm aware of display: block, but it doesn't really work in the situation I'm trying to handle now - a form with <input> fields. Something like this:
<form>
Thingy 1: <input class="a" type="text" name="one" />
Thingy 2: <input class="a" type="text" name="two" />
Thingy 3: <input class="b" type="checkbox" name="three" />
Thingy 4: <input class="b" type="checkbox" name="four" />
</form>
I'd like it to render so that each label displays on the same line as the corresponding input field. I've tried this:
input.a:after { content: "\a" }
But that didn't seem to do anything.
It'd be best to wrap all of your elements in label elements, then apply css to the labels. The :before and :after pseudo classes are not completely supported in a consistent way.
Label tags have a lot of advantages including increased accessibility (on multiple levels) and more.
<label>
Thingy one: <input type="text" name="one">;
</label>
then use CSS on your label elements...
label {display:block;clear:both;}
Form controls are treated specially by browsers, so a lot of things don't necessarily work as they should. One of these things is generated content - it doesn't work for form controls. Instead, wrap the labels in <label> and use label:before { content: '\a' ; white-space: pre; }. You can also do it by floating everything and adding clear: left to the <label> elements.
It looks like you've got a bunch of form items you'd like to show in a list, right? Hmm... if only those HTML spec guys had thought to include markup to handle a list of items...
I'd recommend you set it up like this:
<form>
<ul>
<li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
<li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
</ul>
</form>
Then the CSS gets a lot easier.
the following would give you the newlines. It would also put extra spaces out in front though... you'd have to mess up your source indentation by removing the tabbing.
form { white-space: pre }
<form>
<label>Thingy 1: <input class="a" type="text" name="one" /></label>
<label>Thingy 2: <input class="a" type="text" name="two" /></label>
<label>Thingy 3: <input class="b" type="checkbox" name="three" /></label>
<label>Thingy 4: <input class="b" type="checkbox" name="four" /></label>
</form>
and the following css
form label { display: block; }
<style type="text/css">
label, input { float: left; }
label { clear:left; }
</style>
<form>
<label>thing 1:</label><input />
<label>thing 2:</label><input />
</form>
One option is to specify a XSLT template within your XML that (some) browsers will process allowing you to include presentation with mark-up, CSS, colors etc. that shouldn't affect consumers of the web service.
Once in XHTML you could simply add some padding around the elements with CSS, e.g.
form input.a { margin-bottom: 1em }
The secret is to surround your whole thingie, label and widget, in a span whose class does the block and clear:
CSS
<style type="text/css">
.lb {
display:block;
clear:both;
}
</style>
HTML
<form>
<span class="lb">Thingy 1: <input class="a" type="text" name="one" /></span>
<span class="lb">Thingy 2: <input class="a" type="text" name="two" /></span>
<span class="lb">Thingy 3: <input class="b" type="checkbox" name="three" /></span>
<span class="lb">Thingy 4: <input class="b" type="checkbox" name="four" /></span>
</form>
I agree with John Millikin. You can add in <span> tags or something around each line with a CSS class defined, then make them display:block if necessary. The only other way I can think to do this is to make the <input> an inline-block and make them emit "very large" padding-right, which would make the inline content wrap down.
Even so, your best bet is to logically group the data up in <span> tags (or similar) to indicate that that data belongs together (and then let the CSS do the positioning).
The CSS clear element is probably what you are looking for the get linebreaks.
Something along:
#login form input {
clear: both;
}
will make sure the no other floating elements are left to either side of you input fields.
Reference
The javascript options are all over complicating things. Do as Jon Galloway or daniels0xff suggested.
Use javascript. If you're using the jQuery library, try something like this:
$("input.a").after("<br/>")
Or whatever you need.