If you look here and click in the password box it has a yellow focus rectangle:
The control in question is a input but I want to do it to a div. Take this code:
<div class="bbp-template-notice error" role="alert" tabindex="-1">
<ul>
<li><strong>ERROR</strong>: Your reply cannot be empty.</li>
<li><strong>ERROR</strong>: Please solve Captcha correctly.</li>
</ul>
</div>
What CSS styling must I apply to get this outer yellow?
At the moment I have:
#bbpress-forums .bbp-template-notice {
padding: 2px !important;
border: solid 1px #000 !important;
background: #708090;
}
Which gives this result:
Any guidance gratefully appreciated.
As Paulie_D advised, outline property is what you're looking for when the element is focused. If you need to know what options are available for the outline property, W3 Schools has great visuals that you can review
This is the code for adding a border on div focus.
.bbp-template-notice {
padding: 2px !important;
border: 1px solid #000;
background: #708090;
transition: all 0.5s ease-out;
}
.bbp-template-notice:focus {
outline: #ff0 solid 4px !important;
transition: all 0.5s ease-out;
}
Related
I'm trying to create an "enhanced" radio button by use of an inset box-shadow.
Here's a CodePen of what I got so far
What I'm trying to do is to make the background of the .radio-button <div /> be used as the color of the box-shadow. In my current solution, the color is set to #fff, which works on a white background, but not when the background is gray.
Setting it to currentColor sets the color of the box shadow to the border-color value, which is #333;
Setting it to inherit seems to disable the box-shadow, at least in Chrome. Makes sense in a way I guess, i'm assuming inherit doesn't work for parts of a property like here.
Not setting it at all defaults it to the value of color, which is black.
Is there a way to achieve what I want to do without JavaScript?
CSS does not provide a special value that corresponds to the computed background color of an element akin to currentColor (which corresponds to the foreground color; that is, color — it shouldn't be corresponding to border-color even if it's set to a different value to color).
You could cheat by setting color to the desired background color and background-color: currentColor along with the box shadow, putting the label text in its own element within the label element, and giving that new element the intended font color.
The inherit keyword can only exist by itself in a CSS declaration. It cannot be used as a single component in a set of values. This means while box shadows can inherit, the entire box-shadow property must be inherited in full. When that happens, what ends up inherited is the box shadow of the parent element — which won't work either since the parent has no box shadow.
I still don't fully understand what are you trying to do ...
May be something like that ?
.test {
width: 60px;
height: 60px;
border: solid 2px black;
border-radius: 100%;
margin: 10px;
display: inline-block;
background: radial-gradient(circle, white 10px, transparent 30px);
box-shadow: 2px 2px 6px 0px black;
}
body {
background-image: linear-gradient(to right, red 90px, green 90px, green 180px, blue 120px);
}
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
CSS doesn't provide much ability to create the 'padding of transparency' that you are looking for, however there is a way with a pseudo-element.
You need to drop the box-shadow and any background on the circle, and instead envisage the central dot as a separate element that will 'float' on top:
.radio-button-input + .radio-button-circle {
display: inline-block;
width: .8em;
height: .8em;
margin-right: .5em;
border: 2px solid #333;
border-radius: 50%;
transition: background-color .1s ease-out;
position: relative;
}
.radio-button-input + .radio-button-circle:after {
content: ' ';
display: block;
background-color: transparent;
transition: background-color .1s ease-out;
width: .55em;
height: .55em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 100%
}
.radio-button-input:checked + .radio-button-circle:after {
background-color: #333;
}
I am using css to make an underline come under a span:
CSS:
.un{
text-decoration:none;
transition: all .5s ease-in;
}
.un:hover{
text-decoration:underline;
}
HTML:
<span class="un"> Underlined Text - Or to be underlined </span>
The underline simply appears, it doesn't move in over .5 seconds, like the transition should apply. Why not? How can I make this work?
Updated for 2021:
The support for text-decoration-color has come a long way, and common browser support requirements have loosened making it a viable option for most new projects. If you are only seeking a color transition, and can do without IE support, see this answer below.
Original answer:
You cannot change the color of the text-decoration independent of the color. However, you can achieve a similar effect with pseudo elements:
.un {
display: inline-block;
}
.un::after {
content: '';
width: 0px;
height: 1px;
display: block;
background: black;
transition: 300ms;
}
.un:hover::after {
width: 100%;
}
<span class="un">Underlined Text - Or to be underlined</span>
That is the most customizable way to do it, you can get all sorts of transitions. (Try playing around with the margins/alignment. You can make some awesome effects without adding to your HTML)
But if you just want a simple underline, use a border:
.un {
transition: 300ms;
border-bottom: 1px solid transparent;
}
.un:hover {
border-color: black;
}
<span class="un"> Underlined Text - Or to be underlined </span>
A proper solution that will work with multiple line text and doesn't require border-bottom mockup should look like this. It utilizes text-decoration-color property.
Have in mind that it's not supported by old browsers
.underlined-text{
text-decoration: underline;
text-decoration-color: transparent;
transition: 1s;
/*add those for opera and mozilla support*/
-webkit-text-decoration-color: transparent;
-moz-text-decoration-color: transparent;
}
.underlined-text:hover{
text-decoration-color: red;
/*add those for opera and mozilla support*/
-webkit-text-decoration-color: red;
-moz-text-decoration-color: red;
}
<span class="underlined-text">You're the greatest thing that has ever been or ever will be. You're special. You're so very special. It is a lot of fun. You don't want to kill all your dark areas they are very important. In your world you can create anything you desire.</span>
I had a similar issue with a tags and I figured it out.
The reason it's not animating is because you cannot transition from a text-decoration: none value.
In my case, what I did was set text-decoration-color to transparent and then, on :hover, set the text-decoration-color to the color value I wanted.
In your particular case, you would have to specifiy text-decoration: underline transparent since span tags have an initial text-decoration value of none. Then, on :hover, specify the text-decoration-color that you want.
FWIW, text-decoration and text-decoration-color are animatable properties, according to MDN.
References:
Animatable CSS Properties - MDN
The answer of #Jacob is pretty neat. But I accidentally found a solution no one have provided:
.un {
transition: .4s;
}
.un:hover {
box-shadow: 0 3px 0 #7f7f7f;
}
<span class="un"> Underlined Text - Or to be underlined </span>
Use box-shadow with no blur can achieve underline effects even more tricky and special.
This can make your page run slower if you use a lot of it.
You can use border-bottom instead, like so:
.un{
border-bottom: 1px solid transparent;
transition: all .5s ease-in;
}
.un:hover{
border-bottom: 1px solid black;
}
<span class="un"> Underlined Text - Or to be underlined </span>
Here is a workaround to add fade animation to the underline property:
.un{
text-decoration: underline;
text-decoration-color: #0000;
transition: .2s;
}
.un:hover{
text-decoration-color: #000;
}
Because text-decoration is an all-or-nothing property, you’ll probably want to try using a border-bottom instead. This is how I’ve done it previously:
.un {
border-bottom: 1px solid transparent;
transition: border-color 0.5s ease-in;
}
.un:hover {
border-color: black; /* use whatever color matches your text */
}
Text that is <span class="un">wrapped in the “un” class</span> has a border-bottom that appears as an underline that fades in.
Applying the transition to the border color change from transparent to your text color should give the appearance of a “fade in” from no underline to underline.
If you want an underline with increasing width like below, you can use background-image instead.
.un {
display: inline;
background-image: linear-gradient(#e876f5, #e876f5);
/* ↓ height of underline */
background-size: 0% 2px;
/* ↓ y position of underline. you can change as 50% to see it. */
background-position: 0% 100%;
background-repeat: no-repeat;
transition: background 0.3s linear;
}
.un:hover {
background-size: 100% 2px;
}
<span class="un">hover me</span>
I found this solution to work best, clean and simple. The transition works once you specify a color.
#ref: https://www.w3schools.com/cssref/css3_pr_text-decoration-line.asp
a {
color: #222;
-webkit-text-decoration: none transparent;
text-decoration: none transparent;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
a:focus,
a:hover {
color: #222;
-webkit-text-decoration: underline #222;
text-decoration: underline #222;
}
This is how I moved the border up closer.
<style type="text/css">
a {
text-decoration: none;
border-bottom: solid 1px transparent;
font-weight: 600;
color: rgb(126,93,142);
-webkit-transition: all .5s;
transition: all .5s;
display: inline-block;
line-height: 1em;
}
a:hover {
text-decoration: none;
border-bottom: solid 1px;
color: #ce40ce;
display: inline-block;
line-height: 1em;
}</style>
La La La
I have read a lot of topic about this problem but nothing has worked so far.
the easiest method I have read about involves using box-shadow, but this results in the shadow having a different color to the box even though the code of the color is the same (#141414).
Question
How can I get a fade-out/blur border for a div box? It's quite hard to explain in writing so I made this image to give you the idea (ignore the background). If you look closely you can see the blending and the color is uniform, fading to transparent.
box-shadow as i said, doesn't work for me.
body {
background-image:url('http://phptesting.altervista.org/tessuto.png');
background-repeat: repeat;
}
div {
width: 300px;
height: 300px;
background-color: #141414;
border: 2px solid #141414;
box-shadow: 0 0 5px 5px #141414;
border-radius: 10px;
}
<html>
<body>
<div></div>
</body>
</html>
box-shadow IS actually the only CSS way to get this effect. Try something like this:
div {
margin: 25px 10px;
width: 100px;
height: 100px;
background: #141414;
box-shadow: 0 0 15px 10px #141414;
}
<div></div>
changes the color with fade effect
#yourIDhere:hover{
transition-property: border-color;
transition-duration: 0.5s;
border-color: #976958;
}
Here is how to fade a border using Styled Components. It is based on https://styled-components.com/docs/api
Other answers provided a way to animate the component but I just wanted to fade the border, not the component. After playing with it I realized that I just have to specify the border attribute.
import styled, { keyframes } from 'styled-components';
const fadeOut = keyframes`
0% { border: 2px solid blue; };
100% { border: 2px solid white; };
`
const MyStyle = styled.div`
animation: ${fadeOut} ease 3s;
transition-property: border-color;
transition-duration: 0.5s;
`
I've a html formular in a part of a website, which only specific administration users can access. In this form, you can upload csv files. As only a small group of users can do this, the functionality is more important than the styling. So I decided not to do the usual trick overlaying a div over the field. I just want to archive one thing: The text in the field should look the in Chrome the same as in FF (vertical and horizontal centered text).
Here you can see the both renderings:
FF: http://i.stack.imgur.com/wbHhG.png
Chrome: http://i.stack.imgur.com/1BFHu.png
HTML-Code:
<input type="file" class="button blue full-width" name="csv_file" id="csv_file">
CSS-Styles:
color: #fff;
height: 50px;
line-height: 50px;
padding: 0 10%;
background-image: url("../images/item-hover-button-addtocart-normal.png");
border: medium none;
margin-bottom: 10px;
background-color: #fff;
text-align: center;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
display: block;
font-size: 14px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
width: 100%;
You can fix one of the issues by adding this css:
input[type=file]::-webkit-file-upload-button {
margin: 1px 0;
height: 48px;
}
This makes the button take up more height like in FF and also makes the text vertically centered..
Not so sure how to horizontally center it though, maybe someone else might know a trick.
A jsfiddle to show it working: http://jsfiddle.net/bcwk8qvt/
[edit]
You can make it centered horizontally by adding most of your original CSS to a div wrapped around the input field like this:
http://jsfiddle.net/bcwk8qvt/3/
You still need to keep some of the css on the input field too though for FF to show it the same way.
Make glowing effect around the text box while placing the cursor inside the textbox.
For example : just place the cursor inside the search textbox in our stackoverflow.com.
Its because of css, but i dont know how to achieve it.. Please help me.
Instead of outlines, the box-shadow property achieves a very smooth, nice effect of any text field:
field {
border-color: #dbdbdb;
}
field:focus { /* When you click on the field... */
border-color: #6EA2DE;
box-shadow: 0px 0px 10px #6EA2DE;
}
Here's a JSFiddle Demo I once made myself showing the above code with a transition fade effect.
While the effect you observe on the stackoverflow search box is probably browser specific (e.g. Google Chrome) there is a way to achieve what you want using the CSS :focus pseudo class:
#foo:focus { border: 2px solid red; }
<input id="foo" type="text"/>
Outline property
http://www.w3schools.com/css/pr_outline.asp
If you want it to appear when clicking on a text box:
input:focus { outline: /* whatever */ }
IE7 doesn't support the :focus selector, but you can use jQuery:
$("input").focus(function () {
$(this).css('outline','yellow solid thin');
});
Obviously outline isn't supported by IE7 and even if it was I doubt it would "glow". You need to do this with a custom background image or something. There's an example of doing that here:
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24084560.html
BTW: You say "border color". A border is not an outline. You can just use:
<input onfocus="this.style.border='2px solid yellow'">
You can do it with the CSS :focus pseudo-class but chances are IE6/7 doesn't support it.
Code-
input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}
Demo- http://www.labshab.com/submit-guest-posts/
If you're using bootstrap you can use
class="form-control"