Im new to CSS and HTML and learning html forms right now. I was wondering if it is possible to put a submit button within the text field. Much like how google has their voice search button in their search field.
and if so, how do i do this?
Thanks
Here is an example: http://jsfiddle.net/fatgamer85/9R2XC/
You need to put the element in absolute position and lay it on top of each other.
position: absolute; // absolute position of element
left: -20px; // lay the element on the search box
hope this helps
You cant put it within the element so to speak, but you can position it
HTML
<input type='text' />
<input type='submit' value='GO'/>
CSS
input{
display:inline-block;
position:relative;
}
input:last-child{
left:-40px;
}
Note that this is just one of the ways you can create this effect (you dont have to use a submit input element for example).
Related
I am working on a video game UI that is built in HTML/CSS/JS (Angular). This question has specifically to do with the chat component of the UI, which is a chat box with an input field and send button on the same line beneath it.
The simplified markup for the input and submit looks like this (removed all the angular markup):
<div class="chat-controls">
<form class="chat-form">
<input type="text" class="chat-input" />
</form>
<a href class="chat-send btn">Send</a>
</div>
Here's the problem I'm trying to solve: our game is localized for many different languages, meaning that the horizontal size of the Send button varies dramatically from one language to the next depending on the translation. Therefore I cannot predict the Send button width. I would like the text input box to fill the remainder of the space horizontally next to the send button (fixed .chat-controls width - variable .chat-send width = .chat-input width).
The tricky part is I'm trying to do this in pure CSS without using JS. I know I can measure .chat-send with JS and assign the width of .chat-input accordingly (or do something like add a CSS class to an ancestor that denotes the language version and hardcode the values for each language in CSS), but the most flexible and maintainable solution would be pure CSS.
This cannot be achieved with floating the send button right, since the text input will then either flow underneath the send button or I need to know the width of the send button to assign right padding on .chat-input to compensate. If calc() could predict the width of a sibling element this would be trivial, but alas it cannot. I played with flexbox for a while as well and it doesn't seem appropriate for this situation. My current fix is to make the send button the width of the maximum size it can currently be (Russian, which is about twice the length of "Send" in English) but this doesn't look too good.
My question is: is there any reasonable way to do this in pure CSS, or do I just need to do it in JS? Note that browser compatibility is not an issue as this is implemented with Chromium Embedded Framework so just about everything is supported.
you can use display with either flex or table.
<h1>display:flex;</h1>
<div class="chat-controls">
<form class="chat-form">
<input type="text" class="chat-input" />
</form>
<a href class="chat-send btn">Send</a>
</div>
<h1>display:table;</h1>
<div class="chat-controls bis">
<form class="chat-form">
<input type="text" class="chat-input" />
</form>
<a href class="chat-send btn">Send</a>
</div>
with this following CSS to test both version
.chat-controls {
display:flex;
}
.chat-form {
flex:1;
}
.chat-input , .bis .chat-form{
width:100%;
}
.btn {
padding:0 1em;
}
.bis {
display:table;
width:100%;
}
.bis .chat-form, .bis .btn {
display:table-cell;
}
You can play with it online here : http://codepen.io/gc-nomade/pen/MYmVZM
float is also an option if you do not mind to put the send link/button ahead in HTML (third exemple in the demo linked).
I'm creating a honeypot field in a form exposed at the home page level of a site. The fields go:
honeypot
email
name
text area for comment
The honeypot is not supposed to show for real users, but should be available for bots to fill out. I used CSS like this:
.honey{
position: absolute;
left: -999em;
}
to position the honeypot:
<input class="honey" type="text" placeholder="your email" />
This isn't working. The input element stays firmly where it was. I've checked to make sure the CSS is the last one loaded, observing the proximity rule and that there is nothing more specific, and can't see any override.
Is there some magic I'm not getting?
Thanks
If your <input> is inside of another element (like a <div>) that has position: relative; set, the input will be positioned absolutely but in relation to that element.
Switch to position: fixed; because that's relative to viewable screen area.
Reference
To help protect users, you can't really style upload's with CSS. So, the solution then is to hide the real upload and show the user some other element that looks how you want.
I started a JSFiddle that shows how you could mask an invisiable real upload over a simple button or something so that you could style the button - but still get the user to click the upload input.
However, the problem is that I can't get the hover states to work since the real input is floating above the button.
Am I approaching this problem wrong? How do you style upload inputs?
After playing around some more I finally got it working by making the input a child of the Upload button element. I had to make the upload button a div also since it's not correct to have an input as the child of a button.
See it in action here
If I understand the question, this is what you want to achieve
jsfiddle.net/yVFWJ/1/
.button {
width: 47px;
height: 19px;
cursor: pointer;
text-indent: -9999px;
border: none;
background-image: url(http://www.hudson-realestate.com/us/images/uploadButton.gif);
}
Hm... You could use document.onmousemove event. In there you can check if your mouse position is inside the button area. If it is, simply change the class of button to eg "send_button_hover". If it's not, change the class to just eg "send_button".
You can do it using pure JavaScript. It's not very difficult.
But it's a lot easier if you use jQuery. You have mousemove() function for handeling event; height() and width() functions to calculate button dimmension; offset functions to calculate position of the button and toggleClass() to change the class of the button.
It's difficult to style submit inputs without using images or javascript.
As I know there is no way to insert HTML code right into the sumbit input value. And if I wrap submit input in a div element (for example to add multiple borders), not the whole area will be clickable.
Will a click on a label cause the submitting of the form in all browsers?
<form method="test.rb">
<input type="text" name="test" id="test" />
<label for="button">
<input type="submit" name="button" id="button" value="Send!" />
</label>
</form>
According to the W3C on associating labels:
The label element is not used for the following because labels for these elements are provided via the value attribute (for Submit and Reset buttons), the alt attribute (for image buttons), or element content itself (button).
Thanks to #Jeremiah Isaacson for pointing that out.
Old Answer
Yes, this will work. I can't validate the behavior across all browsers, but here is what W3C spec has to say:
To associate a label with another
control implicitly, the control
element must be within the contents of
the LABEL element ... When a LABEL
element receives focus, it passes the
focus on to its associated control.
So, I guess by clicking the LABEL, you are essentially clicking the submit input.
Thanks to #stevelove for pointing out the feasibility of this.
If the issue is putting HTML code inside your button, you should use <button> which will allow you to do just that.
<button type="submit" name="button" id="button"><img src="button.png" />Send!</button>
But to answer your question about the <label>: No, that will not work. Apparently it will work, and after giving it some thought, I see no reason why it shouldn't.
it's difficult to style submit inputs without using images or javascript.
It's very easy to style inputs without using javascript or images.
using css - style for all submit buttons - input[type=submit] or use a class input.submit-btn applied to specific elements
you can style colour, border, background, padding, position, font weight, gradients, drop shadows..all number of effects using css...
voila sexy button -
input[type=submit] {
padding:4px;
color: #fff;
margin-top: 10px;
background-color: #e96000;
border: none;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff6900), to(#e96000));
background: -moz-linear-gradient(25% 75% 90deg, #e96000, #ff6900);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
I have the following HTML:
<form action="http://localhost:2689/" method="post">
<span>
<label for="SearchBag.PowerSearchKeys" id="Label1"> Key words</label>
<input id="SearchBag.PowerSearchKeys" name="SearchBag.PowerSearchKeys" type="text" value="" />
<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit"><span><em>Search</em></span></button>
<span><em>Advanced</em></span>
</span>
</form>
The form's content needs to be centered over it's width (100% in this case).
The anchor needs to be directly under the button.
Because a picture can say a thousand words, here's the result of my awesome paint art skills:
(source: telenet.be)
And this whole block should be centered on the webpage.
--EDIT--
Because the content of all the controlls can varry greatly in length, I cannot give any element any width specifications (not even in %). Also, over estimating the width would leave confusing white spaces between elements. This too is not a desired effect.
Try setting 'display: block' on each element that you want on a separate line. You may also need to play with the margin and padding to get them centered (like margin-left: 50%; padding-left: -[1/2 width of element]) and text-align: center.
Why not just put a break in before the tag () then align the to the right?
I usually float form elements (left), and if I want to put the next one on a new line i use clear:left.
I'd replace the <span> with a <fieldset> for semantic correctness (I don't think span brings a lot to the table in terms of functionality), and apply some styling to that fieldset to the tune of
fieldset {
text-align: center;
width: 100%;
position: relative;
}
I can't tell for sure if that'll line up the anchor and the button correctly or not, but since the fieldset has position: relative set, you'll be able to position stuff if you need to with relative ease.
As much as i hate to say it, this is a case where use of tables might be considered.
But I would try positioning - i made a quick & dirty solution here
at JSbin
Basically you put your form into an element, center it with text-align and make the container position: relative. Then you use the id in the link to position it absolutely in reference to the parent. But it only works if the parent is an inline element.
Unless you change its display property (and you shouldn't), the span element should be an inline element, meaning that it exists in the flow of text. Putting block level elements inside an inline element isn't really a good idea.
You also have a lot of extraneous tags in there. Instead of this:
<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit">
<span><em>Search</em></span>
</button>
why not just do this:
<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit">
Search
</button>
The span does nothing, and the em can be emulated through CSS:
.fancySubmitButton { font-style: italic }`
Here's what I'd do:
<form>
<label for="SearchBag.PowerSearchKeys" id="Label1">Key words</label>
<input id="SearchBag.PowerSearchKeys" name="SearchBag.PowerSearchKeys" type="text" value="" />
<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit">Search</button>
Advanced
</form>
with the CSS:
form {
text-align: center;
}
.fancySubmitButton, .fancyLinkButton {
font-style: italic;
}
.fancyLinkButton {
display: block; /* this will put it on its own line */
}
Quick response to the comments: giving something the class "fancyLinkButton" doesn't imply that it has rounded corners. Anyway, if you want to put rounded corners on certain elements, I would still avoid using extraneous markup. If more wrapper elements are needed for whatever implementation you're using, then those should be added via Javascript. Remember that mozilla and webkit already support CSS rounded corners - eventually IE will too, and you'll be able to easily change your single javascript function, rather than wading through HTML to find everywhere where there are unneeded spans.