I am experiencing weird behavior of input when it is focused. As you can see through the images below, an extra white border appears whatever its outline-color is.
I tried setting padding: 0px; and box-shadow: none; too, but still I could not remove it. One thing I realized is that setting outline-style: solid; does the trick, but then I couldn't see rounded corner anymore.
The image below is the same input element which has completely same css rulesets:
input {
flex: auto;
border: 1px solid darkgrey;
border-radius: 4px;
background-color: transparent;
color: white;
font-size: 42px;
}
input:focus {
outline-style: auto;
outline-color: orange;
}
body {
background-color: #383838;
}
<input>
Don't use the auto value. Use solid instead
input {
flex: auto;
border: 1px solid darkgrey;
border-radius: 4px;
background-color: transparent;
color: white;
font-size: 42px;
}
input:focus {
outline-style: solid;
outline-color: orange;
}
body {
background-color: #383838;
}
<input>
In addition, in CSS3, outline-style accepts the value auto. The auto value permits the user agent to render a custom outline style, typically a style which is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in CSS, e.g. a rounded edge outline with semi-translucent outer pixels that appears to glow. ref
Related
Only half of these are actually being applied!
.btn{
background-color: darkorange;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 10x 25px;
border-radius: 30px;
Any Ideas
Check if it’s being overruled by CSS specificity.
You can try to override the specificity using
!important
I created an anchor tag with .btn class. and use your css I made only one important changes. after this changes all css property is working.
Displays an element as an inline element (like <a>). Any height and width properties will have no effect.
so I did set display:inline-block; because The element itself is formatted as an inline element, but you can apply height and width values
.btn{
background-color: darkorange;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 10px 100px;
border-radius: 30px;
display: inline-block;
}
if it is helpful for you let me know.
In the Reveal focus docs its:
But, as the docs
Reveal focus increases the size of the focus visual, which might cause issues with your UI layout. In some cases, you'll want to customize the Reveal focus effect to optimize it for your app.
How would you approach creating the effect that does not affect the UI in the way described above?
My Reveal focus component:
Reveal glow is box-shadow
Primary focus visual is outline
Secondary focus visual is border
Background
but something seems off and I can't quite grasp it. Is it box-shadow, is it spacing (like margin, I don't set any as you can see), or is it yet something else? How would you fix it if you wanted it to look like on the gif below?
body {
background-color: #000;
padding: 5px 100px;
}
.tile {
display: inline-block;
height: 82px;
background-color: #555555;
}
.x1 { width: 19%; }
.x2 { width: 38%; }
.reveal-focus {
border: 1px solid transparent;
outline: 2px solid transparent;
}
.reveal-focus:focus {
outline-color: #61B250;
box-shadow: 0 0 15px 3px #61B250;
}
The shadow is being placed above elements that appear before the focused one, but below elements after it. You need to add position: relative to all the elements, and z-index: 1 to the focused one.
To make sure this doesn't interfere with any other stacking, apply position: relative; z-index: 0 to the container. This ensures that it has its own stacking context.
The GIF you show appears to also have a slight animation effect, with the glow being more intense for just a moment before fading to normal. This can be achieved quite simply with animation.
body {
background-color: #000;
padding: 5px 100px;
}
.tile {
display: inline-block;
height: 82px;
background-color: #555555;
}
.x1 { width: 19%; }
.x2 { width: 38%; }
.reveal-focus {
border: 1px solid transparent;
outline: 2px solid transparent;
position: relative;
}
.reveal-focus:focus {
border-color: #000;
outline-color: #61B250;
box-shadow: 0 0 15px 3px #61B250;
animation: glowfade 0.4s linear;
z-index: 1;
}
#keyframes glowfade {
from {box-shadow: 0 0 30px 6px #61B250;}
to {box-shadow: 0 0 15px 3px #61B250;}
}
Adjust values as desired.
How do I make the link outline (blue) conform to the CSS shape? I mean the outline should be in the same shape as the link border.
Would you mind linking, or helping me find the right words to describe it, so I can properly research it, or maybe some basic fixes?
You can use box-shadow (Hover to see it )
button {
width: 200px;
height: 100px;
background: cornflowerblue;
border-radius: 5px 25px 5px 25px;
border-bottom: 2px solid black;
border-top: 2px solid black;
border-left:0;
border-right:0;
outline: 0;
}
button:hover {
box-shadow: 0 0 0 5px orange;
}
<button></button>
I think your referring to the outline property. I think this would helps on your problem :)
button:focus{
outline: none;
}
Currently we make use of nice flat ccs-only buttons that show a push-down effect onclick. They have a weird behaviour:
.button {
cursor: pointer;
display: inline-block;
color: #FFF;
font-weight: normal;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: inline-block;
background: #32a2f0;
border: 0px;
border-bottom: 2px solid #1e87cc;
padding: 10px 30px;
}
.button:hover {
background: #1e87cc !important;
border-bottom: 2px solid #0169AD;
}
.button:active {
border-bottom: 0px !important;
border-top: 2px solid #0169AD;
margin-top: 2px;
padding-top: 10px;
padding-bottom: 8px;
}
http://jsfiddle.net/6SeG8/
The problem is: When clicking the button at the top 2 to 4 pixels, the click event will not trigger. The css :active state does trigger, but the action of the button does not.
It's because of the borders and the top margin you're applying. Rather than specifying border-top: 0px;, etc., you should instead give a transparent border. You can then give extra width to the top border to make up for the margin:
.button {
...
border-top: 2px solid transparent;
}
.button:active {
...
border-bottom: 2px solid transparent;
border-top: 4px solid #0169AD; /* Added 2px to this, instead of 2px margin */
}
JSFiddle demo.
Also you really shouldn't need to use !important at all.
Consider using an after pseudo-element:
.button:active:after{
content: " ";
position: absolute;
top: -4px;
left: 0;
width: 100%;
height: 100%;
}
JSFiddle
Note, that it doesn't work in IE7 and earlier.
.button:active {
border-bottom: 0px !important;
border-top: 2px solid #0169AD;
//margin-top:2px; //this is the problem
padding-top: 10px;
padding-bottom: 8px;
}
Updated Fiddle
.button:hover {
background: #1e87cc !important;
border-bottom: 2px solid #0169AD; // This may cause the onclick not to work when clicking form the bottom of the button
}
Try to press and hold button.
You can see if you press in a middle of the button then the button is dark blue (really pressed).
If you press near the border then the button cannot get 'mouseup' to raise 'click' event. So your javascript will never receive click event and triggered.
If you want the same behavior change border margin to transparent border with desired size.
One thing you can do is
<span class="button">Click me</span>
Le Code (without background): http://jsfiddle.net/SP6ny/ (colors changed for extra contrast)
Basically I have LI elements, and I need to add this border to them:
there is a pattern in the background so the list must not have a background.
thanks.
(I have no idea what I"m doing.)
body{
background: black;
}
.rl_section{
color: white;
display: block;
font-size: 12px;
margin-bottom: 20px;
}
.rl_section:first-child;{
border-top: none;
}
.rl_section:last-child;{
border-bottom: none;
}
.rl_content{
width: 100%;
display: block;
border-top: 1px solid #aaf;
border-bottom: 1px solid #a55;
padding: 3px 0;
}
You could use a technique like this: http://jsfiddle.net/sl1dr/Hub86/
Basically I am using top and bottom borders with differing colors.
Make the background of the container of the LI elements black. Make a margin-top:1px; on the LI elements themselves. then a border-top:1px solid {#YOUR COLOR CODE}; on the elements.
you can use the outline propperty for 1 color and border for the other
li {
outline: 1px gray solid;
border: 1px black solid;
}