In this case, i'm using bootstrap and added my own class for custom styling. my custom style works on Chrome but not in Mozilla.. here is the example:
element:
<input class="form-control en-input-label" id="source" name="source" value="Personal Contact" aria-required="true" aria-invalid="false" readonly />
on Chrome, it looks like this:
but on Firefox, the style doesn't really apply, and it looks like this:
here is the css comparison from dev tools..
Chrome:
but, Firefox can't read the en-input-label class and go with the default class instead.
can anyone explain what happens? why chrome is able to read the en-input-label but Firefox can't ?
EDIT:
Here are css for en-input-label
.form-control.en-input-label, .form-control.en-input-label:read-only {
border-left: none;
border-top: none;
border-right: none;
border-color: #e6e6e6;
padding: 0px;
display: inline-table;
height: 30px;
line-height: 30px;
box-shadow: none;
-webkit-box-shadow: none;
margin-bottom: 0px;
background: transparent;
font-size: 12px;
color: #777;
font-weight: 500;
}
any other css related to the elems is form-control from bootstrap:
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
The reason is that Firefox needs a vendor prefix, so:
.form-control.en-input-label:-moz-read-only {
Related
I'm using Bootstrap v4 as the base for this code. Essentially, my problem is this: I'd like to make use of a gradient background for primary buttons, but we make use of outline as well. Because there's not really support for gradient borders, I'm not sure how best to ensure that both buttons end up being the same height & width with that missing 2px border on the primary buttons.
The above screenshot shows the problem. I did come up with this as one fix (which works great in Chrome):
background-color: var(--background) !important;
background-image: var(--gradient-background) !important;
border-width: 2px !important;
border-style: solid !important;
border-image-source: var(--gradient-background) !important;
border-image-slice: 1 !important;
Which (in Chrome) results in this:
which accurately depicts what I want my end result to look like. However, in Firefox, there's a weird bug which ends up like this:
And finally, setting the border to a transparent color adds a weird effect to the edges in both browsers:
Here's a Codepen that's messy but shows correctly the issue with transparent borders: https://codepen.io/anon/pen/ymvYQX
So I'm looking to do any of the following -
1) I would love some help figuring out how to get rid of the bug on Firefox so it renders exactly the same as it does on Chrome.
2) Alternatively, how else can I fix the original issue? Is there another way to force resizing of the buttons? What about a better alternative for the gradient border lines?
Thanks for your help!
You need to increase background-size to cover also the borders, else, you'll see it repeating:
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
color: #fff;
background-color: #074c81;
border-color: #074575;
}
.btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn-primary:hover {
color: #fff;
background-color: #08548d;
border-color: #074c81;
}
.btn:hover {
color: #58595b;
text-decoration: none;
}
button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) {
cursor: pointer;
}
.Button_root__2FLmr:hover, .Button_root__2FLmr:active, .Button_root__2FLmr:focus {
outline: none !important;
box-shadow: none !important;
}
.DrawerGroup_root___Kf5l button {
margin: 1rem 1rem 0 0 !important;
}
.btn-primary {
color: #fff;
background-color: #0a69b1;
border-color: #0a69b1;
box-shadow: none;
}
.btn {
display: inline-block;
font-weight: 400;
color: #58595b;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 2px solid transparent;
padding: 0px 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 9px;
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
button, [type="button"], [type="reset"], [type="submit"] {
-webkit-appearance: button;
}
.Button_gradientBackground__2z0L9 {
background-color: #279DD9 !important;
background-image: linear-gradient(-60deg, #279DD9, #1169B2);
border: 2px solid transparent !important;
background-position:center;
background-size: calc(100% + 4px);/* or 101% is also fine */
}
.btn-outline-secondary {
color: #6c757d;
border-color: #6c757d;
}
.Button_root__2FLmr {
padding: 2px 1rem !important;
min-width: 7rem;
white-space: nowrap;
}
<div class="DrawerGroup_root___Kf5l">
<button type="button" class="Button_root__2FLmr Button_gradientBackground__2z0L9 btn btn-primary">save</button>
<button type="button" class="Button_root__2FLmr btn btn-outline-secondary">cancel</button>
</div>
The easiest way I know of to get "borderless" items that perfectly line up with your bordered items, is simply to use a transparent border.
border-color: rgba(0,0,0,0);
To handle the background issues, you can offset and grow the background image using a combination of background-size and background-position
E.g.
button {
background: linear-gradient(-60deg, #279DD9, #1169B2);
border: 2px solid #000;
width: 80px;
background-size: 84px;
background-position: -2px;
}
#b {
border-color: rgba(0, 0, 0, 0);
}
<button id="a">Button 1</button>
<button id="b">Button 2</button>
No need to hard code any value. All you need is to add background-origin: border-box;ref so that your background consider the border area too. By default it's padding-box so it will cover the padding area then will repeat inside border:
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
color: #fff;
background-color: #074c81;
border-color: #074575;
}
.btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn-primary:hover {
color: #fff;
background-color: #08548d;
border-color: #074c81;
}
.btn:hover {
color: #58595b;
text-decoration: none;
}
button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) {
cursor: pointer;
}
.Button_root__2FLmr:hover, .Button_root__2FLmr:active, .Button_root__2FLmr:focus {
outline: none !important;
box-shadow: none !important;
}
.DrawerGroup_root___Kf5l button {
margin: 1rem 1rem 0 0 !important;
}
.btn-primary {
color: #fff;
background-color: #0a69b1;
border-color: #0a69b1;
box-shadow: none;
}
.btn {
display: inline-block;
font-weight: 400;
color: #58595b;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 2px solid transparent;
padding: 0px 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 9px;
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
button, [type="button"], [type="reset"], [type="submit"] {
-webkit-appearance: button;
}
.Button_gradientBackground__2z0L9 {
background-color: #279DD9 !important;
background-image: linear-gradient(-60deg, #279DD9, #1169B2);
border: 2px solid transparent !important;
background-position:center;
background-origin: border-box;
}
.btn-outline-secondary {
color: #6c757d;
border-color: #6c757d;
}
.Button_root__2FLmr {
padding: 2px 1rem !important;
min-width: 7rem;
white-space: nowrap;
}
<div class="DrawerGroup_root___Kf5l">
<button type="button" class="Button_root__2FLmr Button_gradientBackground__2z0L9 btn btn-primary">save</button>
<button type="button" class="Button_root__2FLmr btn btn-outline-secondary">cancel</button>
</div>
Related question for more detail: Why doesn't this radial-gradient complete the circle?
I have never run into this issue before. My input/button disappears for a brief moment when I hover over it.
Does anyone know why this would happen?
.button {
padding: 10px 12px;
border: 1px solid #BE1E2D;
border-radius: 2px;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
font-size: 1.4rem;
color: #FFF;
background: linear-gradient(to bottom right, #BE1E2D, #981824);
text-transform: uppercase;
text-decoration: none;
transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out;
cursor: pointer;
}
.button:hover {
background: #BE1E2D;
transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out;
}
<input type="submit" value="Submit" class="button">
THIS POST IS FOR REFERENCE ONLY
As Turnip stated; the issue is that you're apply a transition: onto a gradient background so the background needs to be reset from null the first time the transition is effected.
You do not need to set a transition in the :hover state.
There's no need for transition all; only set transitons on the elements you actually want to change.
Removing the gradient issue (commented out) solves the problem.
You seem to have syntax issue: to right bottom is the correct syntax; not "to bottom right" it is [left|right] [top|bottom]
Therefore your question is an exact duplicate of Use CSS3 transitions with gradient backgrounds
Slowing down the transition and increasing the colour differences for clarity below:
.button {
padding: 10px 12px;
border: 1px solid #BE1E2D;
border-radius: 2px;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
font-size: 1.4rem;
color: #FFF;
background: #981824;
/*background: linear-gradient(to right bottom, #BE1E2D, #99CC55);*/
text-transform: uppercase;
text-decoration: none;
transition: background 1s ease-in-out;
-webkit-transition: background 1s ease-in-out;
cursor: pointer;
}
.button:hover {
/*background: #BE1E2D;*/
background: #99CC55;
}
<input type="submit" value="Submit" class="button">
And with Gradients,
Partial Answer:
After my various fixes, now after the first instance where it loads from white, the gradient transition works correctly (on more Firefox) :
.button {
padding: 10px 12px;
border: 1px solid #BE1E2D;
border-radius: 2px;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
font-size: 1.4rem;
color: #FFF;
background: linear-gradient(to right bottom, #BE1E2D, #99CC55);
text-transform: uppercase;
text-decoration: none;
transition: background 1s ease-in-out;
-webkit-transition: background 1s ease-in-out;
cursor: pointer;
}
.button:hover {
background: #BE1E2D;
}
<input type="submit" value="Submit" class="button">
I'm trying to assign a padding to a text field, but the right side overlays the main content. How can i fix it?
<div class='contenedor_section'>
<input type='text' placeholder='name' class='estilo_input_text'>
</div>
.contenedor_section{
padding: 20px;
background:red;
}
.estilo_input_text {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-style: italic;
color: #999999 !important;
}
https://jsfiddle.net/ys0yb15s/
Negate the padding you applied. Or use border-box.
calc function is very handy, and widely supported, use it!
.contenedor_section{
padding: 20px;
background:red;
}
.estilo_input_text {
display: block;
width: calc(100% - 24px);/* you have to negate the padding of 12px on each side */
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-style: italic;
color: #999999 !important;
}
<div class='contenedor_section'>
<input type='text' placeholder='name' class='estilo_input_text'>
</div>
Add box-sizing: border-box; to .estilo_input_text. This includes padding and borders in the width/height settings.
https://jsfiddle.net/k9at43zg/
Solution: add width: calc(100% - 24px); to your .estilo_input_text:
.estilo_input_text {
width: calc(100% - 24px);
}
link https://jsfiddle.net/dalinhuang/LLyhwr64/
.contenedor_section{
padding: 20px;
background:red;
}
.estilo_input_text {
display: block;
width: calc(100% - 24px);
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-style: italic;
color: #999999 !important;
}
<div class='contenedor_section'>
<input type='text' placeholder='name' class='estilo_input_text'>
</div>
box-sizing: border-box; /Added this/
.contenedor_section{
padding: 20px;
background:red;
}
.estilo_input_text {
box-sizing: border-box;/**Added this**/
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-style: italic;
color: #999999 !important;
}
<div class='contenedor_section'>
<input type='text' placeholder='name' class='estilo_input_text'>
</div>
I was just having a small issue with applying equal padding to a button, I applied the following styles to it:
.btn-request-more-info {
background: #fff;
color: #6e2c91;
font-size: 18px;
padding: 0.5 2.5em;
border: 1px solid #fff;
font-weight: 900;
text-transform: uppercase;
border-radius: 10px;
border: 1px solid #fff;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
Now since the above doesn't work, I had to use a hack and reduce 1px from the bottom padding of the button:
.btn-request-more-info {
background: #fff;
color: #6e2c91;
font-size: 18px;
padding: 10px 2.5em 9px;
border: 1px solid #fff;
font-weight: 900;
text-transform: uppercase;
border-radius: 10px;
border: 1px solid #fff;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
10px above and 9px below, so why is it that 0.5em padding is not equally distributed?
P.S. to recreate the error, change the styles in the button to padding:0.5em 2em.
Difference in padding (I have used ruler to show visually the difference in padding distribution).
Padding above:
Padding below:
I have had this problem many times before, but never found a solution. Why might this be happening?
This can be because of line-height property of css. If you see the computed values(visual representation present at the end of style tab of developer tool) from developer tool both padding-top and bottom are same. But the difference you notice is not considering the line-height of the text. If you hover over your element from developer tool you'll see that box surrounding the text has some space below the text. The browser while applying padding consider this to be the part of the text and applies padding only around this box.
Try line-height:normal properties in css for button:
.btn-request-more-info {
background: #fff;
color: #6e2c91;
font-size: 18px;
padding: 10px 2.5em 10px;
border: 1px solid #fff;
font-weight: 900;
text-transform: uppercase;
border-radius: 10px;
border: 1px solid #fff;
line-height:normal;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
I am currently working on a website with a complex CSS file. I have added a new feature, but I can't seem to edit an input tab that I have due to other styling affecting it. Essentially I am trying to over-ride a certain property.
CSS
textarea, input[type="number"]{
background-color: #ffffff;
border: 0 solid #CCCCCC;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.035) inset;
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
select, input[type="number"] {
border-radius: 2px 2px 2px 2px;
color: #555555;
display: inline-block;
height: 37px;
font-size: 14px;
line-height: 15px;
margin-bottom: 0px;
padding: 2px 6px;
vertical-align: middle;
}
select, textarea, input[type="number"]
color: #626c72;
display: inline-block;
font-size: 14px;
line-height: 20px;
margin-bottom: 10px;
padding: 4px 6px;
vertical-align: middle;
box-shadow: 1px 1px 8px rgba(0,0,0,0.05);
width: 100%;
}
.target {
border: 0;
}
HTML
<div class="container">
<div class="row">
<div class="form-group col-sm-6">
<label for="Label1">Label1:</label>
<input class="form-control target" step="any" type="number" min="0" max="24"></input>
</div>
</div>
</div>
What I am trying to do is have is override border: 0 solid #CCCCCC; from the first selector and make it look like the default bootstrap input for the .target input . I don't want it to affect all other inputs in my application. I only want it to affect the html you see above. I thought my last styling .target selector would do the trick, but it doesn't. My jsFiddle is here. I want the default bootstrap border/outline for my input. As you can tell its not there right now.
You can use the CSS :not selector if you don't want your custom CSS to apply to that specific input:
textarea, input[type="number"]:not(.target) {
background-color: #ffffff;
border: 0 solid #CCCCCC;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.035) inset;
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
select, input[type="number"]:not(.target) {
border-radius: 2px 2px 2px 2px;
color: #555555;
display: inline-block;
height: 37px;
font-size: 14px;
line-height: 15px;
margin-bottom: 0px;
padding: 2px 6px;
vertical-align: middle;
}
Bootply
You can also use:
input.target {
border: 0;
}
or
input[type="number"].target {
border: 0;
}