Look at the edges. I been trying to fix this for two days now, throw at it everything everywhere. The problem is when the scrollbar appears this happens. Note it's the same when scrollbar is unstyled. What do you think?
Styled component code:
padding: 6px;
resize: none;
font-family: inherit;
font-size: inherit;
background-color: #e4e4e4;
color: black;
outline: none;
border: none;
&:focus {
outline: none;
border: none;
box-shadow: 0 0 0 2px #2d8cff;
background-color: ${Colors.primary};
}
& {
::-webkit-scrollbar {
width: 16px;
cursor: initial;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
box-shadow: inset 0 0 10px 10px #c1c1c1;
border: solid 4px transparent;
cursor: initial;
}
::-webkit-scrollbar-thumb:hover {
box-shadow: inset 0 0 10px 10px #7d7d7d;
}
}
I fixed this using box-sizing: border-box and using border instead of boxshadow. In border then has to be specified in not focus state too, to the same color as background.
Related
Is this a box shadow or an outline? I'm confused because outlines can't have radius property and box shadows have blur effect.
That can be a combination of border and box-shadow and outline: none.
I have added the border and box-shadow to default state, if needed we can move that to :focus
body {
padding: 10px;
zoom: 250%;
}
.custom {
width: 100%;
height: 30px;
border-radius: 5px;
border: 2px solid #0000ff;
box-shadow: 0 0 0 2pt rgb(0 0 255 / 30%);
}
.custom:focus {
outline: none;
}
<input type="text" class="custom">
Use an outline with a rgba color on an input with a border radius:
input {
border: 1px solid #ae11fc;
border-radius: 0.5rem;
font-size: 1rem;
height: 2rem;
}
input:focus {
outline: #ae11fc44 solid 0.2rem;
}
Checkout out this fiddle
You can achieve the required styling by adding the following properties to your input style. You can play around it here: https://codepen.io/taleyamirza/pen/ExmzYJr
input:focus {
outline-color: #6c8afc;
border-color: #9ecaed;
box-shadow:0 0 10px #6c8afc;
-moz-box-shadow: 0px 0px 4px #6c8afc;
-webkit-box-shadow: 0px 0px 4px #6c8afc;
}
My question makes more sense with a picture.
.instagram {
color: #E44060;
font-size: 1.5em;
padding: 12px 14px 12px 14px;
border: 2px solid #E44060;
border-radius: 7px;
&:visited {
color: inherit;
}
&:hover {
color: $tertiary-color;
background-color: #E44060;
transition: all .25s ease 0s;
}
&:active {
background-color: #B2334C;
border: 2px solid rgba(0,0,0,0.2);
box-shadow: inset 4px 4px rgba(0,0,0,0.2), inset -4px -4px rgba(0,0,0,0.2);
}
}
How do I make it so the corners of the box-shadow don't overlap making the opacity 0.4? Should I try to create a button using a different method?
Use boxshadow and transform to create the push button effect
.button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
<button class="button">Instagram</button>
Rather than having 2 box-shadows, you could use the "spread" feature (the 4th number after "inset").
box-shadow: inset 0 0 0 4px rgba(0,0,0,0.2);
https://www.w3schools.com/CSSref/css3_pr_box-shadow.asp
I don't understand why I can't get this to work easily. Trying to make a simple CSS button for a link with a white line around the text. I want the red box to change to #1f1f1f when I hover over but I'm having issues with it delaying depending when I hover what part.
BUTTON TEXT
font-size: 1.3em letter-spacing: .3em
BOX
10px padding (between text and outline),
1px #ffffff border,
5px padding (between outline and main box),
background: #be0922
hover
background: #1f1f1f
normal red button (background:#be0922;)
hover black button (background:#1f1f1f;)
I might try just making the <a> the full red button, with a <span> inside with a border.
HTML:
<a href="#" class="fancy-button">
<span>Read More about our services</span>
</a>
CSS:
.fancy-button {
background: #be0922;
font-size: 1.3em;
letter-spacing: .3em;
text-align: center;
padding: 10px;
box-sizing: border-box;
display: inline-block;
text-decoration: none;
}
.fancy-button span {
color: white;
text-transform: uppercase;
border: 1px solid white;
display: inline-block;
padding: 5px 10px;
box-sizing: border-box;
}
.fancy-button:hover {
background: #1f1f1f;
}
See jsfiddle with this example working:
http://jsfiddle.net/3gh9qen2/
there is a few ways with border, box-shadow and outline ....
button {
line-height: 1.3;
padding: 15px;
background: red;
border: none;
color: white;
vertical-align: middle;
margin: 5px;
box-sizing: border-box;
}
.outline {
outline: solid 1px;
outline-offset: -5px;
}
.outlineborder {
outline: 5px solid red;
border: 1px solid white;
}
.shadow {
box-shadow: 0 0 0 5px red, inset 0 0 0 1px white;
}
.border {
box-sizing: border-box;
border: 5px solid transparent;
box-shadow: inset 0 0 0 1px white;
}
.shadowborder {
box-shadow: 0 0 0 5px red;
border: 1px solid white;
margin: 5px;
}
button:hover {
background: #1f1f1f
}
.outlineborder:hover {
outline-color: #1f1f1f
}
.shadow:hover {
box-shadow: 0 0 0 5px #1f1f1f, inset 0 0 0 1px white;
}
.shadowborder:hover {
box-shadow: 0 0 0 5px #1f1f1f;
}
<button class=none>101 simple reset to start from</button>
<button class=outline>simple reset & outline offset</button>
<button class=outlineborder>simple reset & outline + border</button>
<button class=shadow>simple reset & shadow</button>
<button class=shadowborder>simple reset & border shadow </button>
<button class=border>simple reset & shadow border</button>
p.s. I would have used your markup if it was posted
I get a dashed border when I select the select box in Firefox. How can I remove it? See the image.
http://jsfiddle.net/Ltcs9/
select.register {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
appearance: none;
font-size:14px;
display: inline-block;
height: 30px;
margin: 0;
padding: 5px 8px;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
select.register:focus{
outline: none;
border: 1px solid #ff00ff;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
Add the below to your CSS, it should fix it.
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
Demo Fiddle
Do something like this:
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: none;
}
You have to use this pseudo selector ::-moz-focus-inner because this border is Firefoxs "inner focus style".
(Code: http://snipplr.com/view/16931)
I'm trying to make an inset pill using pure CSS:
Where the two color blocks are clickable separately.
But I can't figure out how to apply the box shadow to the containing element. The closest I got was using an :after element and positioning it over the links; but that covers up the links, making them un-clickable:
(jsFiddle)
<div class="pill">
✚
⦿
</div><!--/.pill-->
.pill {
position: relative;
float: left;
&:after {
content: "";
display: block;
border-radius: 8px;
box-shadow: inset 1px 2px 0 rgba(0,0,0,.35);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
a {
display: block;
padding: 4px 6px;
text-decoration: none;
color: #fff;
float: left;
&.plus {
background: #3c55b1;
border-radius: 8px 0 0 8px;
border-right: 1px solid darken(#3c55b1, 30%);
}
&.circle {
background: #40be84;
border-radius: 0 8px 8px 0;
border-left: 1px solid lighten(#40be84, 15%);
}
}
}
I'm aware of the pointer-events property, but browser support is pretty shabby.
So what do we think? Possible?
You are not using the spread property on the box shadow, so you want to create a border, instead using box shadow add a border to each element.
Remove the:after property and will get the normal behavior
jsFiddle
Make it simple,
draw your box-shadow from a, so it doesn't matter wich size they take.
http://codepen.io/gcyrillus/pen/xwcKg
.pill {
position: relative;
float: left;
background:#eee;
padding:0.5em;
}
a {
display: inline-block;
padding: 4px 6px;
width:1em;
text-align:center;
text-decoration: none;
color: #fff;
font-weight:bold;
box-shadow:inset 1px 2px 0 rgba(0,0,0,.35);
}
.plus {
background: #3c55b1;
border-radius: 8px 0 0 8px;
border-right: 1px solid #0c2571;
position:relative;
}
.circle {
background: #40be84;
border-radius: 0 8px 8px 0;
box-shadow:
inset 0px 2px 0 rgba(0,0,0,.35),
inset 1px 0 0 #70de94
;
}