I have a submit button in a form that isn't taking on all the style I have set for it. I want the submit button to look the same as a "next section button I have, but it looks different
Here's some relevant HTML:
<form>
Next Section >><br/>
<input type="submit" name="submit" value="Submit Application" id="submit" />
</form>
And here's the CSS:
.btn, #submit {
margin-top: 20px;
background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:6px;
display: inline-block;
color: #fff;
font-family: 'Oswald';
font-size: 20px;
padding: 12px 24px;
text-decoration: none;
cursor: poiner;
float: right;
}
.btn:hover, #submit:hover {
cursor: pointer;
box-shadow: 0px 0px 1px #777;
}
And here's a JS Fiddle which shows the output differences: JS Fiddle
Use this CSS on the submit button.
#submit {
border: none;
}
Related
I'm trying to get some css properties to appear across my forms, but it's not working when I move the properties to the parent html element.
The CSS properties applied directly to the .input class work, but when applied to the parent .form-control class they don't work and don't seem to affect the input and none of the .form-control properties appear in Chrome dev tools if I inspect the text input element?
.form-control {
display: inline-block;
height: 34px;
width: 100%;
margin: 10px;
border-radius: 4px;
border: 1px solid #ccc;
}
/*.form-control .input {*/
/*height: 34px;*/
/*width: 100%;*/
/*margin: 10px;*/
/*border-radius: 4px;*/
/*border: 1px solid #ccc;*/
/*}*/
.form-control .button {
display: block;
background-color: limegreen;
font-size: 14px;
font-weight: 400;
color: white;
margin: auto;
vertical-align: middle;
padding: 6px 12px;
border: 1px solid transparent;
height: 25px;
border-radius: 4px;
}
<form className="form-control">
<input className="input" type="text" />
<button className="button">Get Weather</button>
</form>
From the code snippet you provided, it's because you are applying the rules directly to the form and not the forms input. Input will not inherit the properties you are setting on the form. You need to specifically target the input like you have in the commented out code.
I have a link and a submit button styled with the same .button class. Is there an easy way to make them look exactly the same (to have a same height)?
body .button {
text-align: center;
line-height: 15px;
background: #3333CC;
border-color: #5033CC;
border-radius: 4px;
color: #fff;
font-size: 11px;
border: 1px solid;
padding: 4px 7px 4px 7px;
cursor: pointer;
min-width: 90px;
text-decoration: none;
display: inline-block;
}
<form>
<a class="button" href="http://www.example.org">Link as button</a>
<input class="button" type="submit" value="button as button"/>
</form>
EDIT: I just found out that they look the same in Google Chrome, but not in Firefox.
In this example, they do have the same height (25pixels). You can always set a height in the CSS.
One thing you missed is changing the font-family.
In this example I've added one just to Helvetica, but that will make them more similar.
You can set box-sizing:border-box, set a solid height (25px in this example) and then change display:inline-block; to float:left;
body .button {
text-align: center;
line-height: 15px;
background: #3333CC;
border-color: #5033CC;
border-radius: 4px;
color: #fff;
font-size: 11px;
border: 1px solid;
padding: 4px 7px 4px 7px;
cursor: pointer;
min-width: 90px;
text-decoration: none;
float:left;
font-family:'Helvetica';
box-sizing:border-box;
height:25px;
}
<form>
<a class="button" href="http://www.example.org">Link as button</a>
<input class="button" type="submit" value="button as button"/>
</form>
I really like the Option Button found in the ZURB building block library here: http://zurb.com/building-blocks/option-button
However, I am almost always working with 1 x normal hyperlink button and a submit button. I'm finding this is causing me headaches wherever I try to have neat rows of buttons that should look the same. What additional CSS would get this 'Option Button' to work as desired when working with an input submit class ?
My HTML is pretty straightforward and looks like this:
<form name="article_selection" action="single-article-view.php" method="post">
<div class="row">
<div class="medium-6 columns">
<div class="wrapper">
<label>READ MORE</label>
Read on another website
<input type="hidden" value="<?php echo $article_ID; ?>" name="article_ID" />
<input type="submit" class="inside" name="<?php echo $article_ID; ?>" value="Read on this website" />
</div>
</div>
</div>
</form>
In this scenario the 2nd half of the option button is malformed.
I can't update an image to display due to reputation restrictions (seriously?)
<img src="http://i96.photobucket.com/albums/l185/indoanalytics/Button_Problem_zpszhgpvzbt.png" border="0" alt=" photo Button_Problem_zpszhgpvzbt.png"/>
The CSS as per the building blocks option button (linked to above) is:
.wrapper {
overflow: hidden;
display: inline-block;
border: 2px solid #008cba;
border-radius: 999px;
text-align: center;
width: 100%;
background: #fff;
margin-top: 50px;
}
.wrapper:hover {
border: none;
background-color: #008cba;
transition: background-color 0.3s ease;
}
.wrapper:hover .inside {
display: block;
font-size: 16px;
padding: 22px;
float: left;
}
.wrapper:hover .inside:hover {
transition: background-color 0.3s ease;
background-color: rgba(0, 0, 0, 0.1);
}
.wrapper:hover label {
display: none;
}
.wrapper .inside {
display: none;
color: #fff;
width: 50%;
z-index: 9999;
}
.wrapper label {
padding: 16px;
color: #008cba;
font-size: 16px;
font-weight: bold;
}
Update: I also have separate button stylings before the above in the my CSS which may be causing the problem.
.topic-button {
border-style: solid;
border-width: 1px;
font-family: inherit;
font-weight: bold;
line-height: 1;
position: relative;
text-decoration: none;
text-align: center;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #009fd9;
color: #fff;
box-shadow: rgba(255, 255, 255, .4) 0 1px 0 inset;
border-color: #008cbf;
font-size: 12px;
padding: 5px 6px;
margin-top: 2px;
cursor: pointer;
}
.menu-topic-button {
width:99%;
background: #444444;
border:none;
font-family: inherit;
font-weight: bold;
line-height: 1;
position: relative;
text-decoration: none;
text-align: center;
color: white;
font-size: 14px;
padding: 2px;
margin-top: 2px;
cursor: pointer;
}
I have attempted applying CSS from the above to:
.wrapper button[type="submit"] {}
.wrapper input[type="submit"] {}
For both I have copied the .inline CSS from the zurb building blocks as well as tried resetting CSS values back to zero in both, but no luck.
Any help greatly appreciated.
I am trying to achieve something like the website here: http://bit.ly/1f55jUR (where it says Space Min.) but I fail miserably lol..
Here is what I have done until now:
<input type="text" class="textbox" id="box" /><span class="textbox2">TB</span>
.textbox {
border: 1px solid #cccccc;
outline:0;
height:22px;
width: 30px;
}
.textbox2 {
border: 1px solid #cccccc;
font-size: 16px;
background-color: #f0f0f0;
padding: 3px 6px 3px 6px;
}
Live example:
http://jsfiddle.net/55Nb3/
Any help would be highly appreciated.
Thank you!
You need to modify your html like this (span don't have the same properties than div):
HTML
<input type="text" id="textbox" /><label for="textbox" clhttp://jsfiddle.net/55Nb3/#forkass="textbox2">TB</label>
Here is the CSS
#textbox {
border: 1px solid #cccccc;
outline:0;
height:30px;
width: 30px;
border-radius: 4px 0 0 4px;
box-sizing: border-box;
font-size: 16px;
}
label {
display: inline-block;
vertical-align: top;
border: 1px solid #cccccc;
border-left: none;
font-size: 16px;
background-color: #f0f0f0;
line-height: 30px;
padding: 0 6px;
height: 30px;
border-radius: 0 4px 4px 0;
box-sizing: border-box;
}
Here is a link to it
They used Twitter Bootstrap on that website to get that styling: http://getbootstrap.com/components/#input-groups-basic.
I do it by using a mix of jQuery and CSS
jQuery
$('input[type="text"], input[type="email"], input[type="tel"], .post textarea').on('focus blur',function(e){
if(e.type == 'focus' || e.type == 'focusout'){
$(this).addClass('focussed');
} else {
$(this).removeClass('focussed');
}
});
CSS
input{
/* General style here */
}
input.focussed{
/*Different styles for focussed input here */
}
I've done an update on your fiddle: http://jsfiddle.net/55Nb3/5
It's mostly done by:
label {
display: inline-block;
}
And a few style adjustments.
It really doesn't matter if it is a label or something else.
thanks for the help, I bet this is an easy fix.
I've applied a custom :focus to my input which removes the default outline (glow) and adds a box shadow and border. The only problem is that when the input field is focused, because of the border and box shadow, the submit button, which rests to the right of the input, jumps to the right about a pixel or two. Very annoying.
JSFiddle: http://jsfiddle.net/D3k3B/
<form action="#" method="get">
<input type="text" name="email" placeholder="Your email">
<input type="Submit" name="submit" value="Go">
</form>
form {
position: absolute;
bottom: 20%;
width: 400px;
left: 50%;
margin-left: -125px;
}
input[name="email"] {
font-family: "Prosto One";
width: 200px;
height: 25px;
font-size: 14px;
background-color: rgba(0,0,0,.4);
border: none;
border-radius: 10px;
color: white;
}
input:focus {
outline: none;
border: 1px solid yellow;
box-shadow: 0px 0px 10px yellow;
}
input[name="submit"] {
margin: -5px;
width: 50px;
}
Thanks!
set border 1px solid transparent to input[name="email"]
input[name="email"] {
font-family: "Prosto One";
width: 200px;
height: 25px;
font-size: 14px;
background-color: rgba(0,0,0,.4);
border: 1px solid transparent;
border-radius: 10px;
color: white;
}
You need to match your border css with a transparent value so they don't move when applied
input[name="email"] {
font-family: "Prosto One";
border: 1px solid transparent;
width: 200px;
height: 25px;
font-size: 14px;
background-color: rgba(0,0,0,.4);
border-radius: 10px;
color: white;
}
working example:
http://jsfiddle.net/whiteb0x/D3k3B/3/