I'm trying to add two borders to an input text when it's focused, the solution I did is to add a border and a box shadow.
The issue I'm having is that I want the outer border to have a radius of 1px and the inner doesn't have a radius.
How can I achieve that ?
input:focus {
border: 1px solid #14a7a7;
box-shadow: 0px 0px 1px 3px #83d7d8;
border-radius: 0;
}
input {
border: 1px solid #979797;
outline: 0;
}
<input type="text" />
Use the box-shadow as the inner border and you can easily add radius
input:focus {
box-shadow: 0 0 0 1px inset #14a7a7;
border: 3px solid #83d7d8;
border-radius: 3px;
}
input {
box-shadow: 0 0 0 1px inset #979797;
border: 3px solid transparent;
outline: 0;
}
<input type="text" />
Or consider an extra wrapper and :focus-within
input:focus {
border: 1px solid #14a7a7;
}
input {
border: 1px solid #979797;
outline: 0;
}
label {
border: 3px solid transparent;
border-radius: 3px;
display: inline-block;
}
label:focus-within {
border: 3px solid #83d7d8;
}
<label><input type="text" /></label>
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;
}
I know it doesn't by default, but I'm trying to force it to.
I'm building a button-like anchor that has a solid box-shadow (no blur) to create the illusion of depth, and when hovered it reacts.
Only problem is that it reacts only when the cursor is above the anchor itself, and since it moves a few pixels when hovered, depending on how close is the cursor to the edge, it causes the anchor to flicker.
Is it possible to order the shadow to be included in the element's total size? And I know it's kind of bothersome that a button misbehaves in this way, but is it terrible coding? I realize it's kind of a design question, but I'm after the code, really.
TLDR: my anchor flickers when hovered too close to the edge. alternatives?
The code is working, but I'll paste it anyway.
Here's the code:
.btn {
display: inline-block;
width: 50%;
margin-left: 25%;
/*center*/
padding: 10px 20px;
border-radius: 20px;
background-color: #71e2ff;
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff, 0 3px #34d6ff, 0 4px #34d6ff;
}
.btn:hover {
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff, 0 3px #34d6ff, 0 4px #34d6ff, 0 5px #34d6ff, 0 6px #34d6ff;
transform: translateY(-2px);
}
.btn:active {
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff;
transform: translateY(0);
}
<a class="btn" href="#">suscribe</a>
EDIT:
Thanks Paulie_D, worked like a charm! Pseudo element with absolute position stretched in all directions was the way to go.
No you can't include a box-shadow in the height/width calculations but you can increase the click / hover area by using a pseudo-element which is sized to include the box-shadow.
From CSS-Tricks
button {
border: 0;
border-radius: 0;
outline: 0;
background: #4e68c7;
box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891, 2px 3px 1px #3852b1, 4px 3px 1px #203891, 3px 4px 1px #3852b1, 5px 4px 1px #203891, 4px 5px 1px #3852b1, 6px 5px 1px #203891;
color: white;
white-space: nowrap;
padding: 9px 16px;
position: relative;
}
button:hover,
button:focus {
background: #3d57b4;
}
button:hover,
button:active {
box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891;
-moz-transform: translate(3px, 3px);
-ms-transform: translate(3px, 3px);
-webkit-transform: translate(3px, 3px);
transform: translate(3px, 3px);
}
button:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: -5px;
bottom: -5px;
outline: 1px solid red;
/* for demo */
}
button:hover::after,
button:active:after {
top: -3px;
left: -3px;
right: -2px;
bottom: -2px;
}
body {
padding: 30px;
}
#message {
padding: 10px 0;
}
<button>A Button</button>
I’m trying to adapt some css code I found, however my table seems ugly (according to me). I'll explain this on a picture.
css:
td, th {
border-left: 1px solid #494437;
border-top: 1px solid #494437;
padding: 10px;
text-align: left;
}
th {
background-color: #b8ae9c;
-webkit-box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,1);
box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,1);
border-top: none;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
td:first-child, th:first-child {
border-left: none;
}
I explained what I want by an image:
EDIT: For example I expect white area on right side, when I add padding-right: 0.2em; into "th". But it doesn't change anything.
Is this what you are expecting?
.table {
border: 1px solid #000;
float: left;
}
.header {
border: 2px solid #ccc;
border-width: 2px 0 0 2px;
background-color: #b8ae9c;
margin: 2px;
float: left;
}
<div class="table">
<div class="header">Header</div>
<div class="header">Header</div>
</div>
I need to make box-shadow for each table cell using :before pseudo element. It works perfect in all browsers except firefox.
CSS
table {
border-collapse: collapse;
}
.box2 .c-table {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border-left: 1px solid #e5e3d5;
border-top: 1px solid #e5e3d5;
border-bottom: 1px solid #ebe8da;
border-right: 1px solid #ebe8da;
}
.box .c-table {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border-left: 1px solid #e0ded1;
border-top: 1px solid #e0ded1;
border-bottom: 1px solid #e6e4d6;
border-right: 1px solid #e6e4d6;
}
.inbox .c-table {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border-left: 1px solid #e0ded1;
border-top: 1px solid #e0ded1;
border-bottom: 1px solid #e6e4d6;
border-right: 1px solid #e6e4d6;
}
.c-table tr > td {
position: relative;
padding: 5px;
}
.c-table tr + tr {
border-top: 1px solid #f0eee0;
}
.c-table td + td {
border-left: 1px solid #f0eee0;
}
.c-table td:before {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: '';
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
}
.inbox {
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #444444;
padding: 5px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background-color: #d3d2c5;
border: 1px solid #f0eee0;
text-shadow: -1px -1px rgba(240,238,224,1), 1px 1px rgba(240,238,224,1);
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
}
.box2 .inbox {
border-left: 1px solid #e5e3d5;
border-top: 1px solid #e5e3d5;
border-bottom: 1px solid #ebe8da;
border-right: 1px solid #ebe8da;
}
HTML
<div class="inbox margin-space">
<table class="c-table ">
<tbody>
<tr class="th">
<td>column1</td>
<td>column2</td>
<td>column3</td>
</tr>
<tr>
<td>row1</td>
<td>row2</td>
<td>row3</td>
</tr>
<tr>
<td>row4</td>
<td>row5</td>
<td>row6</td>
</tr>
<tr>
<td>row7</td>
<td>row8</td>
<td>row9</td>
</tr>
<tr>
<td>row10</td>
<td>row11</td>
<td>row12</td>
</tr>
</tbody>
</table>
</div>
I want to use pseudo for .c-table td because it makes a visual diffrence. ( visible in chrome )
http://fiddle.jshell.net/UXeBj/10/
Temporary solution
#-moz-document url-prefix() {
.c-table td:before {
content: none;
}
.c-table td {
box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
}
}
apparently this bug report causes the same issue:
https://bugzilla.mozilla.org/show_bug.cgi?id=63895
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)