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>
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?
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 {
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;
}
I am new to styling. When I was searching for styling buttons, I came to know about this "Graphic Button". How do I include graphic buttons in my page.
<button type="button">
<img src="graphic.png" alt="alternative text">
</button>
just use css and go through background etc, example, just to show you how much you can do
.btn, input[type="button"] {
/*border-style: solid;
border-width: 1px;*/
cursor: pointer;
font-family: inherit;
font-weight: bold;
line-height: 1;
margin: 0 0 1.25rem;
position: relative;
text-decoration: none;
text-align: center;
display: inline-block;
padding-top: 0.75rem;
padding-right: 1.5rem;
padding-bottom: 0.8125rem;
padding-left: 1.5rem;
font-size: 1rem !important;
background: none;
/*border-color: #2bacd1;*/
color: white;
border-radius: 0px 0px 8px 0px;
/*-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;*/
/*-webkit-transition: background-color 100ms ease-out;
-moz-transition: background-color 100ms ease-out;
transition: background-color 100ms ease-out;*/
-webkit-appearance: none;
min-width: 95px;
}
I am trying to use the CSS3 ease-in-out effect when mouseover the tabs, here the background color is changing, but the text color is not changing.
My HTML code is:
<html>
<body>
<div id="tab" class="links">
Rang De
</div>
<div id="tab" class="links">
Robin Sharma
</div>
<div id="tab" class="links">
Programme
</div>
<div id="tab" class="links">
Book now
</div>
<div id="tab" class="links">
Contact
</div>
</body>
</html>
My CSS is:
#tab
{
float: left;
padding: 15px 10px 10px 10px;
background: url(images/menutop.gif) repeat-x 0px 0px #EDEDED;
height: 25px;
width: 176px;
font-size: 16px;
text-align: center;
border: 1px solid #FAFAFA;
box-shadow: 0px 4px 4px #d5d5d5;
-moz-box-shadow: 0px 4px 4px #d5d5d5;
-webkit-box-shadow: 0px 4px 4px #d5d5d5;
}
.links:hover
{
background: #00a9dd !important;
color: #fff;
text-shadow: 0.1em 0.1em 0.05em #333;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
Here's a jsFiddle.
Add .links:hover a { color:#fff; }
Code: http://jsfiddle.net/MnZDd/13/
It's as simple as adding:
.links:hover a {
color: #000;
}
http://jsfiddle.net/MnZDd/15/