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"
Related
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;
}
I was on the google news page and I was wondering how do google make his border around each sections, because I can't find in the inspector any element with a border property. I find those borders very thin and I think it is not with the border property with CSS.
if you inspect well, then you will see its a box-shadow instead of border, Here is what they used in their css, Please check again,
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04);
background-color: #fff;
Hint: check for class .lPV2Xe
Because this is not a border. It's a box-shadow.
this effect can be created by
.card {
background: white;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04);
}
.card:hover{
box-shadow: 0px 8px 10px 0 grey;
-webkit-transition: box-shadow .3s ease-in;
}
and create a div with the class card.
found a similar pen Link to example
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;
`
In an attempt to make an arrow in pure CSS for my tooltip, I ran across a problem in Firefox:
I tried to find what was causing the dark border in Firefox without success.
Here is a jsfiddle and a running snippet demonstrating the problem:
.tooltip {
position:relative;z-index:1;
display:inline-block;padding-right:10px;
}
.tooltip .info {
position:absolute;left:100%;top:-7px;
display:block;padding:7px;border:1px solid #cccccc;
background:#fff;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 1px 1px 8px 0px rgba(0, 0, 0, .2);
box-shadow: 1px 1px 8px 0px rgba(0, 0, 0, .2);
}
.tooltip .info img {float:left;}
.tooltip:after {
content: '';
position:absolute;top:0;left:100%;
display:block;
width:0;
height:0;
margin-left:-13px;
border:0 solid transparent;
border-right-color:#cccccc;
color:#ccc;
}
.tooltip .info:after {
content: '';
position:absolute;top:7px;left:-12px;z-index:10;
display:block;
width:0;
height:0;
border:transparent solid 6px;
border-right-color:#fff;
color:#ccc;
}
<a class="tooltip">Test for tooltip<span class="info">My tootip information</span></a>
This second demo demonstrates that background transparent is the root cause as replacing transparent by a color results in the same render in Chrome and Firefox.
2015's EDIT
Now it works by using both RGBa and transparent; appearently, the Bug has been resolved (maybe incidentally, because it is still in state NEW , instead that on FIXED).
If it still happens to you, you're probably running an old FireFox version (the current one is 38.0.5), and you can use the workaround in the answer to overcome the problem.
It is the
Bug 646053 - dark diagonals at corner joins adjacent to transparent borders
The workaround is to use RGBa instead of transparent:
/* old */
border: transparent solid 6px;
border-right-color: #fff;
/* new */
border: rgba(255,255,255,0) solid 6px;
border-right-color: #fff;