Before I start crying, could someone please explain why none of the attempted CSS soltions for styling a submit button have any effect at all? I've gone for font-size: 50px to make it obvious if I hit the right element, which I haven't yet:
input[type="submit"].wysija-submit {
border-radius: 10px;
border: none;
box-shadow: none;
font-family: inherit;
font-size: 50px!important;
}
.wysija-submit input[type="submit"] {
border-radius: 10px;
border: none;
box-shadow: none;
font-family: inherit;
font-size: 50px!important;
}
.wysija-submit.wysija-submit-field input[type="submit"] {
border-radius: 10px;
border: none;
box-shadow: none;
font-family: inherit;
font-size: 50px!important;
}
<input class="wysija-submit wysija-submit-field" type="submit" value="Sign-up">
This one does work.
input[type="submit"].wysija-submit {
border-radius: 10px;
border: none;
box-shadow: none;
font-family: inherit;
font-size: 50px!important;
}
<input class="wysija-submit wysija-submit-field" type="submit" value="Sign-up">
.wysija-submit input[type="submit"] and .wysija-submit.wysija-submit-field input[type="submit"] contain descendant combinators so they won't match because the left hand side matches the input, then the right hand side matches nothing because inputs can't have descendants.
The space character in CSS is the Descendant Combinator. It tells your CSS compiler to select any descendant of the previous selector.
What your current selector is doing is trying to select any element with a class attribute containing .wysija-submit.wysija-submit-field, then it's trying to find an input element whose type is submit inside that element. This would work for the following markup:
<elem class="wysija-submit wysija-submit-field">
<input type="submit" />
</elem>
To get this to select the input element whose type is submit and whose class contains wysija-submit and wysija-submit-field, you'll need to change your selector from:
.wysija-submit.wysija-submit-field input[type="submit"] { ... }
To:
input[type="submit"].wysija-submit.wysija-submit-field { ... }
Related
Style is same but inside form button size and outside form button size is not same. Outside form button text-content apply extra padding around it. Same issue with a tag. Why this is happening? How to solve it? Also for button user agent stylesheet override my font. How to fix it?
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght#400;700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body,
html {
font-family: 'Noto Sans JP', sans-serif;
font-size: 16px;
color: #333;
}
.container {
margin: 30px auto;
padding: 25px;
border: 1.5px solid #e6e6e6;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
border-radius: 6px;
}
a {
text-decoration: none;
}
.btn {
background-color: #fff;
font-size: 0.9em;
font-weight: 700;
padding: 10px 22px;
border-radius: 5px;
}
.btn--orange {
color: #e99d0f;
border: 1px solid #e99d0f;
}
.btn--red {
color: #ff2727;
border: 1px solid #ff2727;
}
.section-info {
width: 60%;
}
.section-info img {
width: 100%;
margin-top: 10px;
}
.section-info__nav {
display: -webkit-box;
display: flex;
margin-top: 10px;
}
.section-info a {
margin-right: 10px;
}
<section class="container section-info">
<div class="section-info__nav">
Edit
<button class="btn btn--red">Delete</button>
<form action="#" method="POST">
<button class="btn btn--red">Delete</button>
</form>
</div>
</section>
In the first look, it could be a bit confusing but if you look at the style inheritance with more attention you will find out a little difference between them.
Lets get into it step by step
As we can see there is display: flex; attribute within the provided style.
.section-info__nav {
display: -webkit-box;
display: flex;
margin-top: 10px;
}
As we know flex will only affect the direct children of a div, so here what we got:
Edit
<button class="btn btn--red">Delete</button>
<form action="#" method="POST">
...
</form>
There are three direct children to the provided div (a, button, form). The other button within the form won't take effect of the flex display since the form itself got display block by default.
Why this is happening at all?
As we know flex display in the default situation will stretch the content to match the exact height (There is 44px available in section-info__nav, so each button height with display flex will be 44px). But when we got a display block, all items with this kind of display will put in the document just by their normal form and size, so since the button class is:
.btn {
background-color: #fff;
font-size: 0.9em;
font-weight: 700;
padding: 10px 22px;
border-radius: 5px;
}
the sum of the padding, border, and font-size will be 34px (10px lower than actually available height in the div). So the button will add at the beginning of div and in comparison with other buttons, it will look likes a dumb.
NOTE: In order to prevent items from fitting the entire available space in your div you can control them by align-items attribute. But in your particular case, since <a> don't have a default line-height attribute you should add specific line-height attribute to your .btn class in order to align all of your items properly.
How to fix this?
Simply add flex display to your form like this:
form {
display: flex;
}
because your form is not flex.you should just add cod below in your form css:
display: flex;
I have a problem with styling a textarea, i use bootstrap 4 css
i was trying to styling by my self but if i using a padding or margin it's make the textarea height to big
.comment-box {
padding: 0.8rem 1rem;
border-radius: 30px;
}
<textarea class="form-control comment-box" rows="1"></textarea>
i want this textarea look like input field with button in inside just like this image
textarea input
Here
is the complete explanation about overriding bootstrap style. I am sure you can follow that rule and solve that issue.
Edit:
Also you don't need to implement his first and second step. You can follow only 3 and create new style that override the bootstrap style
https://www.w3schools.com/howto/howto_css_contact_form.asp">here is a link to your answer
that should solve your issue, check out the css they use and play with it.
input[type="text"],
select,
textarea {
width: 100%;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 10px;
}
input[type="submit"] {
border: none;
background: #4aaaa5;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
color: #ffffff;
font-size: 16px;
}
EDIT: I've added the relevant code below at the bottom of this question. As you'll see there, the button is wrapped within a div. Also, this problem only occurs in one browser, that being Firefox, and I'll be using a hack to target that browser only.
I have an input element of type submit (i.e., basically a submit button). The text displayed in this element, as defined in the element's value attribute, appears too low (i.e., too close to the bottom of the button instead of vertically centered). The button has a fixed height.
Naturally, I want to move the button's text, as defined in the value attribute, one or two pixels upwards.
I've tried a few things with the button's padding (top and bottom), but that didn't change anything. [Is that to be expected, BTW?] Therefore, I would like to use relative positioning to move the text upwards a bit.
The thing is, however, that I need to target the text itself, NOT the input/button element. And that's of course because the button itself should stay at its current location, I only want to move the TEXT displayed on the button.
Thus my question: Is there a way, in CSS, to target not the button but only its displayed text (as defined in the value attribute) ?
Of course, other solutions (preferably CSS only) are welcome as well.
Code:
HTML:
<form id="zoekform">
<input type="text" class="" id="search-text" name="search-text" placeholder="Search">
<div class="erom" id="erom2">
<input id="zoekknop" style="float: right" type="submit" method="GET" value="Search!" />
</div>
</form>
CSS:
#zoekform {
height: 29px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 9px;
}
.erom {
height: 100%;
display: inline-block;
box-sizing: border-box;
}
#erom2 {
border: solid 1px #452F5D;
width: 27%;
display: inline-block;
box-sizing: border-box;
}
#zoekknop {
float: right;
height: 100%;
color: white;
font-size: 19px;
box-sizing: border-box;
background-color: #446666;
color: white;
letter-spacing: 2px;
border: solid 1px white;
width: 100%;
}
And finally the part where I'm targeting Firefox only, and where I can't get the padding working (and to be sure, the "media query" (it's not really a media query) does work, and in any case I've also tried this without the media query, i.e. as part of the regular CSS):
#-moz-document url-prefix() {
#zoekknop {
padding-top: -1px !important;
padding-bottom: 9px !important; // I set it to 9px for now, so that I could clearly see if it worked
}
}
For some reason form elements are particular and quirky about font.
Assign a font to the <submit>'s parent, then use font: inherit on the <submit> button.
On the <submit> assign line-height of 1.4 to 2 (notice there's no unit like px or em.) I actually have the line-height assigned by inheriting the font from <form> 1.4.
Set width using the ex unit of measurement. One ex is as wide as ax character, making it a great way of gauging how much space you are using in relation to your text. I used 9ex for a 6 character word (i.e. Submit).
This ruleset may help you for Firefox:
input::-moz-focus-inner {
border: 0;
padding: 0;
/* Some users have said these last two are
unnecessary or should be -2px */
margin-top:0;
margin-bottom: 0;
}
Here's some changes I did to your button and search field:
#zoekknop {....
....
border: 2px double white;
line-height: 1.65;
vertical-align: baseline;
}
#search-text {
line-height: 1.75;
vertical-align: baseline;
padding: 4px 3px 0;
}
Review the Snippet below:
#form {
font: 400 16px/1.4'Verdana';
}
#form .sub {
font: inherit;
width: 9ex;
color: blue;
border-radius: 5px;
}
#form .sub:hover {
color: cyan;
background: #888;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#zoekform {
height: 29px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 9px;
font: 400 16px/1.4 'Verdana';
}
#zoekform #zoekknop {
color: white;
font-size: 18px;
box-sizing: border-box;
background-color: #446666;
color: white;
border: 2px double white;
line-height: 1.65;
vertical-align: baseline;
}
#search-text {
line-height: 1.75;
vertical-align: baseline;
padding: 4px 3px 0
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
input::-moz-focus-inner {
border: 0;
padding: 0;
margin-top: 0;
margin-bottom: 0;
}
<form id="form" name="form">
<input type="submit" class="sub" value="Submit" />
</form>
<form id="zoekform">
<input type="text" class="" id="search-text" name="search-text" placeholder="Search">
<input id="zoekknop" type="submit" method="GET" value="Search!" />
</form>
This should work
#buttonID{
width: 500px;
height: 500px;
padding-bottom: 100px;//pushes text up inside the button
}
Make sure you define the height, width, line-height, font-size, and padding of the button. Then you should be able to manipulate the padding and line-height to get the result you want. It sounds like the button may be inheriting a line height that is causing the issue.
Targeting the text itself isn't the way to go about this. Would be helpful to see the CSS and HTML of the button, and note which browser the issue appears in.
This question already has answers here:
How to style button inputs to be identical in Chrome and Firefox?
(4 answers)
Closed 8 years ago.
I have a CSS class for styling buttons. When I apply it to an <input> and an <a> tag, the <a> is a bit smaller than the <input>. This problem occurs in Firefox (33), but in Chrome (38) it looks fine.
Here is a minimal example:
.my-button {
display: inline-block;
padding: 1em;
border-radius: 0.2em;
border: 1px solid #000;
line-height: 1em;
font-size: 13px;
text-decoration: none;
background-color: #ccc;
color: #000;
}
<input class="my-button" type="submit" value="Save">
<a class="my-button" href="#">Cancel</a>
You can see it also here: http://jsfiddle.net/tr4vbrha/4/
This happens because of a difference in font. The input on windows is Microsoft Sans Serif, while in the a tag it is Times New Roman.
To fix this add the font-family property to the my-button class.
This probably is because the box-sizing property of button is different to that of a button. I added this:
input{
box-sizing: content-box;
}
.my-button{
min-width: 2.75em;
}
and it worked
remove css attribure : display:inline-block
see example :demo
.my-button {
padding: 1em;
border-radius: 0.2em;
border: 1px solid #000;
line-height: 1em;
font-size: 13px;
font-family: Arial;
text-decoration: none;
background-color: #ccc;
color: #000;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
.my-button {
display:inline-block
}
}
<input class="my-button" type="submit" value="Save">
Cancel
So, I've been stuck at this for a couple of hours. I'm essentially trying to get a checkbox to work as a toggle button. I want the styles applied by jquery to be only applied when it's checked and back to it's initial if it has been deselected.
The HTML markup:
<form class="simple_form new_mailing_list_form" data-remote="true" id="new_mailing_list_form" method="post">
<div class="input boolean optional mailing_list_form_opt_in">
<input name="mailing_list_form[opt_in]" type="hidden" value="0">
<label class="boolean optional control-label checkbox toggle-button" for="mailing_list_form_opt_in">
<input checked="checked" class="boolean optional" id="mailing_list_form_opt_in" name="mailing_list_form[opt_in]" type="checkbox" value="1">
Yes, I would like to join the mailing list.
</label>
</div>
The SCSS:
#new_mailing_list_form {
.opt {
color: $white;
background-color: $selectiveYellow !important;
border: 2px solid $selectiveYellow !important;
}
.checkbox {
margin: 0px;
padding: 0px;
}
div label input {
margin-right:100px;
}
.mailing_list_form_opt_in label {
cursor: pointer;
background: transparent;
border: 2px solid $selectiveYellow;
border-radius:2px;
font-size: 15px;
font-weight: normal;
line-height: 1.4;
overflow:auto;
margin:4px;
padding: 8px 15px;
width: auto;
&:hover {
background-color: $sunglow;
border: 2px solid $sunglow;
color: $white;
}
}
.mailing_list_form_opt_in label {
display:block;
}
.mailing_list_form_opt_in label input {
display: none;
}
.mailing_list_form_opt_in input:checked {
background-color:$selectiveYellow;
color:$white;
}
}
JQuery:
$('#mailing_list_form_opt_in').change(function () {
$(this).parent().css({ 'background-color':'#ffbb00','border':'2px solid #ffbb00', 'color':'#fff' });
});
I've tried using a conditional statement as well, but I start to descend into spaghetti JQuery which doesn't even work.
Work on it so far: Working CodePen link
You could use jQuery's toggleClass() method to change the background whenever a user clicks the element.
$("#checkbox_elem").on( "click", function(){
$(this).toggleClass( 'background-class' );
});
Now all you have to do is have a default style on the element, and place the new CSS rules into the background-class class definition. Clicking the element will toggle the class on the element.
You could use an explicit check on the element if you want to add some more functionality:
$("#checkbox_elem").on( "click", function(){
if ( $(this).is(':checked') ){
// the checkbox is marked as "checked"
// here you can manipulate the style accordingly
}else{
// the checkbox is NOT marked as "checked"
// here you can manipulate the style accordingly
}
});
So, I'm sharing my pure HTML5/CSS3 solution (which doesn't use any JS/JQuery!) to this problem so that it could be helpful for others stuck on something similar.
I refactored my markup as follows,
HTML:
<input id="mailing_list_form_opt_in" name="mailing_list_form[opt_in]" type="checkbox" value="1">
<label for="mailing_list_form_opt_in">Yes, I would like to join the mailing list.</label>
and for the styles, I used the adjacent selector + & the pseudo class :checked to show the behavior on that state. The corresponding styles for that are as follows,
SCSS:
input[type=checkbox] + label {
background: transparent;
border: 2px solid $selectiveYellow;
border-radius: 2px;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 15px;
font-weight: normal;
line-height: 1.4;
overflow: auto;
margin: 4px;
padding: 8px 15px;
#include transition( 0.25s linear);
width: auto;
&:hover {
background-color: $sunglow;
border: 2px solid $sunglow;
color: $white;
}
}
input[type=checkbox]:checked + label {
background: $selectiveYellow !important;
border: 2px solid $selectiveYellow !important;
color: $white;
}
input[type=checkbox] {
display: none;
}
Works perfectly, added a Codepen so that you can check that out as well! Hope this helps others! :D