I'm trying to add two legends at the top of the form. I need both legends to display inline as opposed to one stacked above the other.
Like so:
-----legendOne---LegendTwo-----
How do I achieve that layout in CSS?
Here's the current CSS setting:
legend {
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
margin-left: 25px;
color: #FFFFFF;
background: #00BCE6;
border: 1px solid #00BCE6;
padding: 5px 15px;
}
You can set the legend to float:left and add some margin-top, like this:
fieldset {
margin-top:25px;
}
legend {
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
margin-left: 25px;
color: #FFFFFF;
background: #00BCE6;
border: 1px solid #00BCE6;
padding: 5px 15px;
float:left;
margin-top:-25px;
}
<fieldset>
<legend>legend 1</legend>
<legend>legend 2</legend>
<br />
Input <input type="text" />
</fieldset>
The result looks like this: https://jsfiddle.net/4ekec329/ (I also added some margin-top to the fieldset and needed to add a line break after the legends).
This is tested in FF 41, IE 11 and Chrome 46, but I can't guarantee it'll look like this in other browsers, too.
A fieldset normally contains only one legend, so this isn't standard HTML and may break in some browsers.
You could place 2 span elements in the legend then style those instead:
<fieldset>
<legend><span>first</span><span>second</span></legend>
legend {
margin-left:25px;
}
legend span {
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
color: #FFFFFF;
background: #00BCE6;
border: 1px solid #00BCE6;
padding: 5px 15px;
}
legend span+span {
margin-left:25px;
}
<fieldset>
<legend><span>first</span><span>second</span></legend>
<br /><br /><br /><br />
</fieldset>
Related
I'm building a simple Web UI for an embedded system.
I have a couple of buttons to upload a file to the server, the code of the buttons is the following
.button {
background-color: #009999;
border: 0.5px solid #F0F0F0;
border-radius: 0px;
color: white;
display: inline-block;
font-family: Open Sans, Helvetica, Arial;
font-size: 14px;
font-weight: bold;
width: 100%;
padding: 4px 4px;
text-decoration: none;
text-shadow: 0px 1px 0px #197276;
text-align: left;
}
<td style="width: 20%; vertical-align:top; background-color:#FFFFFF;">
<form action="cgi-bin/upload.cgi" method="post" enctype="multipart/form-data">
<input class="button" type="file" name="file">
<input class="button" type="submit" name="Submit" value="Upload">
</form>
</td>
The problem that I noticed is that the file buttons is always slightly bigger than the submit button.
Is there a way to align them? What am I doing wrong?
Thanks!
EDIT:
After trying Yasaman Mansouri (thanks) suggestion (overflow: hidden) i get the follwing output (on the right).
It's much better but still not aligned with the other button.
you can hide your form overflow
.button {
background-color:#009999;
border:0.5px solid #F0F0F0;
border-radius:0px;
color:white;
display:inline-block;
font-family:Open Sans, Helvetica, Arial;
font-size:14px;
font-weight:bold;
width:100%;
padding:4px 4px;
text-decoration:none;
text-shadow:0px 1px 0px #197276;
text-align:left;
}
form{
width: 200px;
overflow: hidden;
}
<td style="width: 20%; vertical-align:top; background-color:#FFFFFF;">
<form action="cgi-bin/upload.cgi" method="post" enctype="multipart/form-data">
<input class="button" type="file" name="file" >
<input class="button" type="submit" name="Submit" value="Upload">
</p>
</form>
</td>
We got it answered on Reddit, by adding "box-sizing:border-box;" to the button css
the alignment is OK.
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
.button {
background-color: #009999;
border: 0.5px solid #F0F0F0;
border-radius: 0px;
box-sizing:border-box;
color: white;
display: inline-block;
font-family: Open Sans, Helvetica, Arial;
font-size: 14px;
font-weight: bold;
width: 100%;
padding: 4px 4px;
text-decoration: none;
text-shadow: 0px 1px 0px #197276;
text-align: left;
}
Thanks!
i was styling the place holder and i use ..
::-webkit-input-placeholder{
font-family: 'Source Sans Pro', sans-serif;
color: #535252!important;
font-size: 18px;
position: relative;
bottom: 03px;
font-weight: 600;
}
But that is one style , how can i apply multiple styles in one place Holder as you can see in the picture
Looks like it's more complex (not only input element). Something like this:
<div class="wrapper">
<label class="prefix">
Prefix:
</label>
<input type="text" placeholder="placeholder" />
</div>
and a css:
div.wrapper {
border: 1px solid blue;
width: 300px;
padding: 4px;
}
div.wrapper input {
border: 0 none;
background-color: transparent;
outline: none;
}
See example
I have the simple form and attached the css file for that. As you can see there are 2 fields and one checkbox - I would like to make the checkbox directly under the textarea, with around 1-2px space, not as it is now - how can I modify that? I thought the problem is somewhere here:
.textox, .textoxarea {
width: 340px;
border: solid 1px #999999;
padding: 2px;
border-radius: 4px;
font-size: 14px;
box-shadow: 0px 1px 2px 0px #9C9C9C;
background-color: #FFFFFF;
outline: none;
color: #474747;
text-align: center;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 100;
}
but I can't find the proper way of doing that.
Here's my fiddle.
Thanks!
Remove the empty paragraphs between textarea and checkbox.
In your fiddle it's on lines 11 and 13.
http://jsfiddle.net/7hq0x6u4/3/
.center p:nth-of-type(2),.center p:nth-of-type(3){
margin:0;
}
This will reduce the space of margin in both the P tags which are covering the input elements
DEMO
Normally use of p tags to align input tags are not recommended.
Hi to your <input type="checkbox"> add these styles.
.foo {
bottom: 1px;
margin-left: 0;
margin-right: 5px;
position: relative;
}
.foo as an example class on checkbox.
I am trying to make this form:
And this is what I get:
(I changed the button color, I know =) )
Here is my HTML:
<form method="post" action="">
<input type="text" id="email" name="email" value="Email" />
<input type="submit" value="Keep me notified" id="submitButton"
</form>
Here is my CSS:
form{
width:350px;
margin: 20px auto;
display:block;
}
input[type=text]{
display:inline-block;
font-family: 'PT Serif Caption', serif;
border:1px solid #CCCBC2;
display:inline;
font-size:14px;
width:300px;
line-height: 16px;
padding: 9px 10px;
height: 18px;
margin:0;
margin-bottom: 5px;
outline: 0;
vertical-align: middle;
width: 269px;
float:left;
-webkit-font-smoothing: antialiased;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
-ms-border-radius:3px;
border-radius:3px;
}
input[type=submit] {
display: inline-block;
background:none;
padding:0 14px;
height: 36px;
margin: 1px 0 0 15px;
text-align: center;
font-size: 15px;
overflow: visible;
color: white;
background-color: #2459a9;
border:none;
font-family: 'PT Serif Caption', serif;
text-transform: lowercase;
text-decoration: none;
cursor: pointer;
-webkit-font-smoothing: antialiased;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
-ms-border-radius:3px;
border-radius:3px;
}
My Q:
How do I get the floats right? Or is it something else?
Can you do it in html5? Cool, show me =)
How do a implement a placeholder in the inputbox
How do I get big letter in the button?
Two things:
The form is too narrow for the total width of the inputs. So for the fiddle you provided, it should be 464px.
Use white-space: nowrap; on the form.
See it at jsFiddle.
Demo
Your form rule makes the form too small, causing the button to wrap on a new line. Try this rule instead:
form {
width: 440px;
margin: 20px auto;
display: block;
}
EDIT:
This should work:
form {
width: 440px;
margin: 20px auto;
display: inline;
}
Demo
I am creating an e-mail form and would like the text box and submit button to be directly next to each other. They should be touching so that it looks like one continuous rectangle.
However, when I get them touching and set a height the submit button doesn't listen! It doesn't stay the same height. If I increase the submit button height alone by a lot the two boxes are not aligned!
HTML:
<div id="form">
<input type="text" class="text-input" name="address" id="address" value="" size="23" maxlegnth="30" />
<input type="submit" value="BUTTON" id="btn-submit" />
</div>
CSS:
#form input{
border: solid 2px #989898;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
outline:none;
background: #d8d8d8;
font-weight:bold;
color: #525252;
position: relative;
height: 25px;
}
#address{
text-align: right;
margin: 0 30 0 auto;
}
#btn-submit{
margin-left: -7px;
width: 44px;
text-align: center;
}
The key is to float:left the inputs and then set a height for them. Live example: http://jsfiddle.net/NweS6/
#form input{
border: solid 2px #989898;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
outline: none;
background: #d8d8d8;
font-weight: bold;
text-align: right;
color: #525252;
float: left;
height: 25px;
}
#form #btn-submit{
margin-left: -2px;
width: 44px;
text-align: center;
height: 29px;
}
The reason the submit needs a figure 4px higher than the input is because for some reason it does not take into the account the border on the button, which top and bottom adds up to 4px.
Float the submit button and the layout will look as expected.
http://jsfiddle.net/4HcWy/9/
This is how you write an HTML form:
<form method="POST" action"/page/to_post_to" >
<input type="text" class="text-input" name="address" id="address" value="" size="23" maxlegnth="30" />
<input type="submit" value="BUTTON" id="btn-submit" />
</form>
Then the elements inside it know it is a form, not just another div.
EDIT: Sorry I misread your question. I thought listening meant it was behaving wrong instead of displaying wrong.
Did you want it to look like the followin? http://jsfiddle.net/4HcWy/6/
form input
{
border:2px solid #989898;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
outline:none;
background: #d8d8d8;
font-weight:bold;
color: #525252;
position:relative;
height: 25px;
box-sizing: border-box;
}
#address{
text-align:right;
margin:0 30 0 auto;
border-right: none;
}
#btn-submit{
margin-left: -7px;
width:44px;
text-align:center;
border-left: none;
}
(Also, since I had used a form element I had to change #form input to form input.)*
It seems that 2 pixels can't work on the input and button but with 1 pixel borders, it's OK.
Look: http://jsfiddle.net/qwLV7/
Update
This seems to work, but I had to hack the height of the button to be higher than the input,
http://jsfiddle.net/qwLV7/1/
Update 2
How's that now?
http://jsfiddle.net/qwLV7/2/
CSS
#form1
{
border:solid 2px #989898;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
background: #d8d8d8;
font-weight:bold;
color: #525252;
position:relative;
width:194px;
}
input{
height:25px;
border:0px;
}
#address{
text-align:right;
margin:0 30 0 auto;
float:left;
width:150px;
}
#btn-submit{
width:44px;
text-align:center;
float:left;
}
HTML
<div id="form1">
<input type="text" class="text-input" name="address" id="address" value="" size="23" maxlegnth="30" />
<input type="submit" value="BUTTON" id="btn-submit" />
<div style="clear:both"></div>
</div>