i have to add dashed outline on focus at a specific offset of 4px, this is working fine in all browsers except IE since it doesn't support outline-offset and i cannot add a wrapper element in the HTML as work around with padding because i am trying to make a generic fix across the application, and i cannot add a border: 4px solid transparent, because the elements have a border which is required, and Pseudo elements will not work because we have a pseudo class of focus and we cannot use box-shadow as it doesn't allow a dashed outline
this is what i want to achieve in IE.
Css which is working fine on chrome
.keyBoardUser input[type="radio"]:focus + div {
//border: 4px solid transparent // cannot use this
outline-offset: 4px;
outline: 1px dashed black;
}
keyboard user is a class which is added on tabbing using JS.
Please refer to this thread, use CSS pseudo elements or nested div to set the border property, and use it as a alternative method.
Sample code as below:
<style>
.keyBoardUser {
margin-left:20px;
text-align: center;
width:30px;
}
input[type="radio"]{
width:20px;
height:20px;
}
#media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
.keyBoardUser input[type="radio"]:focus + div {
outline-offset: 6px;
outline: 2px dashed black;
}
}
/*Microsft Edge browser*/
#supports (-ms-ime-align:auto) {
.keyBoardUser input[type="radio"]:focus + div {
outline-offset: 6px;
outline: 2px dashed black;
}
}
/*IE Browser*/
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.box {
position: relative;
text-align: center;
}
.keyBoardUser input[type="radio"]:focus + div:after {
content: "";
position: absolute;
top: -6px;
left: -6px;
display: block;
width: 40px;
height: 40px;
border: 2px dashed red;
}
.box input[type="radio"] {
margin-left: 5px;
margin-top: 5px;
}
}
</style>
Html code as below:
<div class="keyBoardUser ">
<input id="Radio1" type="radio" />
<div class="box"><input id="Radio1" type="radio" checked="checked" /></div>
</div>
The output like this:
IE browser:
Chrome browser:
Use a pseudo element on the sibling element to style the dashed outline. I am calculating the width and height dynamically.
Use the below class. This works on IE as well!
.keyBoardUser input[type="radio"]:focus + div::after {
content: "";
position: absolute;
display: block;
border: 4px solid transparent;
outline: 1px dashed #000;
width: calc(100% + 10px);
height: calc(100% + 10px);
top: -5px;
left: -5px;
}
Related
I have an input text box, on which I would like to display some text area when the user's mouse get over it, giving to him informations on the text to enter.
here is my HTML code :
<html>
<body>
<style type="text/css">
.mouseover
{
}
</style>
<span onmouseover="this.classname='mouseover'" onmouseout="this.classename=''"></span>
<input id="mybox" type="text" />
</body>
</html>
What is the best CSS trick that would help to do that ?
Thank you for help in advance.
You can do all of this with CSS. Play around with CSS triangles for the tooltip but what you're mainly looking for is to use the :hover pseudo-class. No need for Javascript.
.input {
position: relative;
}
.tooltip {
display: none;
padding: 10px;
}
.input:hover .tooltip {
background: blue;
border-radius: 3px;
bottom: -60px;
color: white;
display: inline;
height: 30px;
left: 0;
line-height: 30px;
position: absolute;
}
.input:hover .tooltip:before {
display: block;
content: "";
position: absolute;
top: -5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid blue;
}
http://jsfiddle.net/v8xUL/1/
You can use Jquery Tooltip:
Jquery Tooltip
Just one more way to do that...
Filldle Demo
For me in IE8 OK DEMO
<input type="text">
<span>Some Text inside... </span>
span {
background-color: rgba(0,102,255,.15);
border: 2px solid rgba(0,102,255,.5);
border-radius: 10px;
color: #000;
display: none;
padding: 10px;
position: relative;
}
span:before {
content: "";
border-style: solid;
border-width: 0 15px 15px 15px;
border-color: transparent transparent rgba(0,102,255,.5) transparent;
height: 0;
position: absolute;
top: -17px;
width: 0;
}
input {
display: block
}
input:hover + span {
display: inline-block;
margin: 10px 0 0 10px
}
* simple css-based tooltip */
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
text-align:left;
font-size:12px;
/* outline radius for mozilla/firefox only */
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
}
// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({
// place tooltip on the right edge
position: "center right",
// a little tweaking of the position
offset: [-2, 10],
// use the built-in fadeIn/fadeOut effect
effect: "fade",
// custom opacity setting
opacity: 0.7
});
got to this link http://jquerytools.org/demos/tooltip/form.html
Try this property it's asp but may work for your case
ErrorMessage="Your Message";
so, i made a simple animated progress bar in jQuery. you can view it here.
I need some code in this post, so here's my CSS:
.progress {
height: 14px;
width: 300px;
background: #111;
border-radius: 5px;
vertical-align: middle;
display: inline-block;
overflow: hidden;
color: white;
}
.filename {
font-size: 10px;
color: white;
position: relative;
}
.progresstop {
padding: 4px;
width: 40px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
height: 8px;
float: left;
background: #c44639;
vertical-align: middle;
display: inline-block;
}
.arrow-right {
width: 0px;
height: 0px;
border-style: solid;
background: #111;
border-width: 7px 7px 7px ;
border-color: transparent transparent transparent #c44639;
float: left;
display: inline-block;
}
my question: as the progress bar reaches the end, the elements "pop" out of existence when they overflow the div and are hidden, instead of staying visible until they're completely out of the div. specifically, when the CSS arrow disappears as it reaches the end, the end of the progress bar changes from a triangle to a line, which is really visually jarring. is there any way to change this behavior, either in CSS or jQuery, to have elements hide "smoothly"?
Altenatively to JoshC's answer,
you could wrap it in a container like this fiddle
HTML
<div id="progress-container">
<div class='progress'>
<div class='progresstop'></div>
<div class='arrow-right'></div>
<div class='filename'>FILENAME</div>
</div>
</div>
CSS
#progress-container {
height: 14px;
width: 300px;
background: #111;
border-radius: 5px;
vertical-align: middle;
display: inline-block;
overflow: hidden;
color: white;
}
.progress {
height: 14px;
width: 500px; /* large value */
}
Just make sure that the .progess width is larger than what you need (text, arrow, and bar)
You are looking for white-space: pre.
Here is an updated example - it works how you want it to now.
.filename {
white-space: pre;
}
EDIT
If you want to remove the glitch at the end of the animation (where the arrow jumps to a new line), use the following markup/CSS:
jsFiddle example - less HTML now, since the arrow is a pseudo element.
HTML
<div class='progress'>
<div class='progresstop'></div>
<div class='arrow-right'></div> /* Removed this, and made the arrow a psuedo element. */
<div class='filename'>FILENAME</div>
</div>
CSS
.filename:before {
content:"\A";
width: 0px;
height: 0px;
border-style: solid;
border-width: 7px 7px 7px;
border-color: transparent transparent transparent #c44639;
position:absolute;
}
How can I make a pointy arrow in CSS? Not just a triangle but one with a stem, like a traditional arrow that would be fired from a bow?
I'm trying to do it by creating a div container, containing two containers, left and right. The right will contain the triangle, and the left will contain three divs, the centre of which will be colored to create the stem.
Here's my code:
HTML:
<div id="main">
<div class='arrowblock'>
<div class='arrowright'></div>
<div class='rectcontainer'>
<div class='rect'></div>
<div class='rect' style='background-color:green'>
</div><div class='rect'>
</div>
</div>
CSS:
.rectcontainer {
height:30px;
width:100px;
}
.arrowblock {
width:130px;
border-top: 15px solid transparent;
}
.arrowright {
float:right;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 30px solid green;
}
.rect {
width:100px;
height:10px;
background-color:transparent;
}
Is there a simpler way to achieve this?
Here is an arrow with pure CSS. Supported by all browsers. It took me less than a minute to make..
jsFiddle
.arrow {
width: 120px;
}
.line {
margin-top: 14px;
width: 90px;
background: blue;
height: 10px;
float: left;
}
.point {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 30px solid blue;
float: right;
}
<div class="arrow">
<div class="line"></div>
<div class="point"></div>
</div>
How about just using a html entity or unicode symbol for your arrow:
<div>→</div>
<div title="U+21A3: RIGHTWARDS ARROW WITH TAIL">↣</div>
div{
font-size: 40px;
}
FIDDLE
There are more to choose from here
To build on #josh-crozier's answer, you can eliminate a lot of the HTML by using pseudo-elements instead:
jsFiddle
HTML:
<div class="arrow"></div>
CSS:
.arrow {
position:relative;
width:120px;
margin:50px auto;
height:0;
border-bottom:10px solid blue;
}
.arrow::after {
content: '';
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 30px solid blue;
position: absolute;
right: -10px;
top: -15px;
}
To add an arrow at the start of the line using the ::before element is trivial also: jsFiddle
I've created this, which you can use for an arrow that points to the right.
In the script are two variables, widthofarrow and colorofarrow. By changing these you can create an arrow of any size or color.
http://jsfiddle.net/FKekh/3/
HTML:
<!DOCTYPE html>
<div id="main"></div>
CSS:
.rectcontainer {
height:30px;
}
.arrowblock {
}
.arrowright {
float:right;
}
.rect {
width:100px;
height:10px;
background-color:transparent;
}
JAVASCRIPT:
widthofarrow=130;
colorofarrow="#345678";
$("#main").append("<div class='arrowblock'><div class='arrowright'></div><div class='rectcontainer'><div class='rect'></div><div class='rect' style='background-color:" + colorofarrow + "'></div><div class='rect'></div></div></div>");
$('.arrowblock').css('width', widthofarrow + 'px');
$('.rectcontainer').css('width', (widthofarrow - (30)) + 'px');
$('.arrowright').css('border-top', (15) + 'px solid transparent');
$('.arrowright').css('border-bottom', (15) + 'px solid transparent');
$('.arrowright').css('border-left', (widthofarrow/4.333333333333333) + 'px solid ' + colorofarrow);
EDIT
I've updated JoshC's great code so it can be used to create arrows of different sizes and colors.
http://jsfiddle.net/fqcFp/2/
Taking Josh's answer a bit further I have made an example that adjusts width based on the container keeping it pure CSS. Thanks #Josh for the starting point! I support some older browsers so this is good for me. We could use transform to rotate the arrow as we like it in more modern browsers. HTH
<div class="RightArrow">
<div class="line"></div>
<div class="point"></div>
</div>
<!-- for very short arrows reduce the width of .line -->
<style> /* style tag added so SO will syntax color please use *.css irl*/
.RightArrow {
width:90%;
position: relative;
}
.line {
margin-top:8px;
width:97%;
background:blue;
height:0.3em;
float:left;
position: absolute;
}
.point {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 37px solid blue;
float:right;
}
</style>
I have an icon, and when you hover over it, I would like to have a custom CSS tooltip appear to the right of the icon. Whether or not you scroll up or down the page, the tooltip will always need to appear to the right of the icon.
And no, I don't want to use any plugins. I just want a little JS/CSS to get the job done. If you use JQuery, it needs to be compatible with v1.7, and JQuery-UI: v1.8.
In addition, it needs to be compatible with IE 6 and 7.
I would prefer to leave my elements as siblings, but it looks like under certain circumstances the div that appears needs to be a child element, so it's OK if the HTML needs to be changed.
HTML:
<img src="" class="icon">ICON<img/>
<div class="demo">
STUFF<br/>
STUFF<br/>
STUFF<br/>
STUFF<br/>
STUFF<br/>
</div>
CSS:
.demo {
margin-left: 5px;
padding: 10px;
width: 265px;
height: 110px;
background-color: #ccc;
position: relative;
border: 2px solid #333;
}
.demo:after, .demo:before {
border: solid transparent;
content: ' ';
height: 0;
right: 100%;
position: absolute;
width: 0;
}
.demo:after {
border-width: 11px;
border-right-color: #ccc;
top: 13px;
}
.demo:before {
border-width: 14px;
border-right-color: #333;
top: 10px;
}
Live Example: http://jsfiddle.net/49Js3/16/
Since my reputation isn't high enough to comment on the answer above, I just wanted to add an updated fiddle (based on the above answer) that positions the tooltip absolutely, but with display: inline-block so that it is not fixed to certain position from the left and will show to the right:
here is the important bit:
a.tippy:hover + div {
display: inline-block;
position: absolute;
}
http://jsfiddle.net/7gmv3wo2/
Fiddle here: http://jsfiddle.net/49Js3/29/
I don't have access to IE6, so I don't know whether it's legal. I do know you'll need an anchor to get hover behavior with CSS in IE7 and earlier.
So, I added an anchor around your image, as well as a div to contain the tooltip.
HTML
<div class="outer">
<a class="tippy" href="">
<img src="" class="icon">ICON<img/>
</a>
<div class="demo">STUFF
<br/>STUFF
<br/>STUFF
<br/>STUFF
<br/>STUFF
<br/>
</div>
</div>
And here is the CSS:
.tippy {
text-decoration: none;
}
.outer {
width: 350px;
}
a.tippy:hover + div {
display:block;
float: right;
}
.demo {
margin-left: 5px;
padding: 10px;
width: 265px;
height: 110px;
background-color: #ccc;
position: relative;
border: 2px solid #333;
display: none;
}
.demo:after, .demo:before {
border: solid transparent;
content:' ';
height: 0;
right: 100%;
position: absolute;
width: 0;
}
.demo:after {
border-width: 11px;
border-right-color: #ccc;
top: 13px;
}
.demo:before {
border-width: 14px;
border-right-color: #333;
top: 10px;
}
I know with some border tricks, I could create trapezoid shape. I can also set its border-color to rgba(r,g,b,a) to make it transparent.
But is it possible to create trapezoid that has transparent borders and background ?
See below image for an example,
Currently, I use some png images to achieve this effect，but generating images of different sizes is really boring work，so I'm looking for a css soluation。
Personally, I think it's overkill, but it can be done like this:
demo
HTML:
<div class='outer'>
<div class='content'><!--stuff here--></div>
<div class='label l1'></div>
<div class='label l2'></div>
</div>
CSS:
.outer {
position: relative;
width: 500px; /* whole thing breaks if this is not a multiple of 100px */
border: solid .5em rgba(0,0,255,.5);
border-bottom: solid 0px transparent;
margin: 7em auto 0;
background: rgba(0,0,0,.5);
background-clip: padding-box;
}
.outer:before, .outer:after {
position: absolute;
top: 100%;
height: .5em;
background: rgba(0,0,255,.5);
content: ''
}
.outer:before { left: -.5em; width: 15%; border-left: solid .5em transparent; }
.outer:after { right: -.5em; width: 55%; border-right: solid .5em transparent; }
.content {
padding: .5em;
margin: 1.5em;
border-bottom: solid 1.5em transparent;
background: lightblue;
background-clip: padding-box;
}
.label {
overflow: hidden;
position: absolute;
top: 100%;
width: 15%;
height: 3em;
}
.l1 { left: 15%; }
.l2 { left: 30%; }
.label:before {
position: absolute;
top: -.5em;
width: 100%;
height: 2.5em;
border: solid .5em rgba(0,0,255,.5);
background: rgba(0,0,0,.5);
background-clip: padding-box;
content: '';
}
.l1:before { left: 9%; transform: skewX(30deg); }
.l2:before { right: 9%; transform: skewX(-30deg); }
It works in Firefox, Chrome, Opera and Safari (I was afraid to test it in IE9, though both transform and background-clip work) but only if the width for .outer has a value that's a multiple of 100px.
Unless using a width that's a multiple of 100px, it only works in Firefox and Chrome (there is a little glitch in Chrome - could be fixed by using a WebKit-only left to right linear gradient that sharply goes from transparent to that semitransparent blue really close to the start).
It breaks in Opera and Safari (if using a width that is not a multiple of 100px):
You can make the bg color and border colors transparent, but the borders will not follow the shape of the trapezoid:
http://jsfiddle.net/Kyle_Sevenoaks/UZbJh/1/
So your best bet is to stick with the pngs for now.