I want the button forced to the left and on a new line. The only way I've been able to accomplish this so far is by inserting some extra markup, <br /><br /><br />, above the markup for the submit button.
How do I modify this CSS to force the button onto a new line?
fieldset input[type="submit"] {
background-color: #d3dce0;
border: 1px solid #787878;
cursor: pointer;
font-size: 1.0em;
font-weight: 600;
padding: 7px 7px 7px 7px;
margin-top: 20px;
display : inline-block;
}
In your CSS, please change this line:
fieldset input[type="submit"] {
display: inline-block;
}
to this way:
fieldset input[type="submit"] {
display: block;
}
And no spaces after display please. :)
Related
Well, I have two buttons (in Spanish) and these buttons are inside an 'a' (link tag) so that:
<div class="MB789">
<button class="B121">Ya soy miembro</button>
<button class="B122">Quiero unirme</button>
</div>
The purpose of the 'a' is obviously to redirect the user to the respective page and the buttons are for the style (yes, I want the user to see buttons and not links)
In the CSS I wrote the following:
.MB789{
display: table;
padding: 10px;
text-align: center;
}
.MB789 button{
border: none;
border: 1px solid black;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
.MB789 a{
margin: 10px;
background: red; /*Debug: to visualize the elements 'a'*/
}
This is the result:
And that's the problem, that the 'a' elements stand out from the buttons.
And this is what happens when I tell the elements to show themselves as a table.
.MB789 a{
display: table;
background: red; /*Debug: to visualize the elements 'a'*/
}
Then this is what happens:
What I want is that 'a' elements do not protrude from the buttons, but that when the user click on a button, be redirected to the respective link.
Note: I know that Javascript can be redirected, but I refrain from doing this using that language because the user can disable Javascript from the browser settings.
Firstly, you cannot nest <button></button> elements inside an <a> tag, that is invalid markup. Please see why here: Can I nest a <button> element inside an <a> using HTML5?
Secondly you can style the <a> tag like a button and this will resolve your problem.
Your HTML markup needs to look like this:
<div class="MB789">
Ya soy miembro
Quiero unirme
</div>
Your CSS would look like this:
.MB789{
display: inline-block;
padding: 10px;
text-align: center;
}
.MB789 a{
display: inline-block;
border: 1px solid black;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
You've put a 10px margin on the buttons, because they're inside of the a tags this margin will be between the buttons and the edge of the a tags, making them protrude out from the button. Try removing that margin:
.MB789 button{
border: none;
border: 1px solid black;
padding: 10px 20px;
cursor: pointer;
}
The following CSS apparently results in the following Button. As you can see there is a weird gray plain button within the white padding. How do I fix this?
How do I make the gray go away?
.button_style {
background-color: white;
color: white;
padding: 15px 15px;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
NOTE: The green space is the background, the white space and gray space are both clickable button.
Use border: 0 or border: none to remove that. By the way, what browser are you using?
HTML
<button class="button_style">hello</button>
CSS
.button_style {
border: 0;
background-color: white;
padding: 15px 15px;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
This is what I had previously, which was giving me the plain gray button:
<p><span class="button_style">Website</span> </p>
I changed it to the following, which resolved my problem:
<input class="button_style" type="button" onclick="location.href = 'http://www.botequotes.com';" value="Visit Site" />
NOTE: JavaScript must be enabled in order to use 'onclick="location.href'
I tried to change the style of gwt radio button style and couldn't succeed.
Is it possible to change the gwt radio button style directly? If No what else should I do to change it.
I tried input[type="radio"]{ } in css, this doesn't help.
Thanks,
Bennet.
From what i think from your question i made a sample, check if it suits your needs
Add the following css class to your application css
.gwt-RadioButton {
background-color: grey;
border: 1px solid #FFFF00;
margin: 10px;
font-size: 2em;
}
No need to add any addStyleNames as the RadioButton by deafult listens to the .gwt-RadioButton css class. The Result after applying above css is something like this,
EDITS :
After you provided the above sample it is very clear what you want. The .gwt-RadioButton allows you to style the RadioButton. What you want is to style the radio circle and the color when it gets selected. In order to do that you need to modify the input[type=radio] class and the label present with the RadioButton.
What we are doing here is disabling the default radio circle using display none and adding our own as a label:before content and then styling it. Hope this solves your problem.
Some Styles that you need to add and then play around to suit your needs are as follows.
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 0;
bottombottom: 1px;
background-color: #282E5A;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
.gwt-RadioButton label:before {
border-radius: 8px;
}
input[type=radio]:checked + label:before {
content: "\2022";
color: aqua;
font-size: 30px;
text-align: center;
line-height: 18px;
}
You need to override gwt-RadioButton Css. For that you need to define a ClientBundle with CSSResource and inject it on your module load.
You may refer to
how to override gwt default css
In Opera when a text field is focused, the submit button gets an ugly black border.
You can see this in a screenshot.
In the bottom of the image the textarea is focused and submit button looks awful. How can I prevent this using CSS?
UPDATE: the CSS for the button is
.uiGreenButtonOuter {
border: 1px solid #234723;
cursor: pointer;
}
.uiGreenButtonInner {
margin: 0;
font-size: 11px;
display: block;
background: #3E7E3E;
padding: 4px 6px;
border-width: 1px;
border-style: solid;
border-color: #6AB76B #3A763B #3A763B;
color: white;
text-align: center;
text-shadow: 0 1px 0 #234723;
cursor: pointer;
}
.uiGreenButtonOuter:hover .uiGreenButtonInner {
text-decoration: none;
background: #4C9B4C;
}
.uiGreenButtonInner:focus{
outline: 0;
}
This will do the job:
input[type="submit"] {
border: 0;
}
if your html is set like this:
<form action="">
<textarea name="fos"></textarea>
<span class="uiGreenButtonOuter">
<input class="uiGreenButtonInner" type="submit" name="send" value="Nyedva" />
</span>
</form>
Here is demo
you can use :focus or :blur pseudo-classes to do the trick. We need the code to understand the exact problem.
eg.
textarea:focus {/* your css here */}
Some times I may may want an anchor beside a submit button, but I always seem to have problems lining them up ...
a, input[type=submit], input[type=button], button {
font-family: arial;
background: #fff;
color: #777;
border: 1px solid #ccc;
font-size: 12px;
line-height: 20px !important;
padding: 5px 10px;
margin: 0;
}
http://jsfiddle.net/cXgzM/
with that, anchors are still 2 pixels short
Simply add this to your CSS:
a
{
display: inline-block;
}
I updated your example. Note that this property doesn't work in IE7 and lower. :)