I want to have some css properties on input:focus so how can I do that?
My scenario is; when input get focus I want to show another div so how can I do that using only css?
On hover I can do that using ">" but on focus is not working and I don;t understand why :(.
so this is my code:
<div class="containerTooltipXxx">
<p class="paragraphClass">
Some text...<br /><input type="radio" /><br />More text...
</p><div class="blocks">
<label>Field</label> <input></input></div>
</div>
.containerTooltipXxx{
padding: 20px;
position: relative;
float: left;
display: inline-block;
border: 2px solid lime;
margin: 50px;
}
.paragraphClass{display: none;}
.containerTooltipXxx:hover > .paragraphClass, .containerTooltipXxx:focus > .paragraphClass{
display: block;
position: absolute;
top:-5px;
left: 50px;
background: red;
opacity:.9;
}
very important, the html hierarchy cannot be changed.
Thank you.
fiddle
using CSS you can only point to the next sibling elements. Here since the p tag is out of the parent div it is not possible using css.
I know that you don't want to change the HTML order but still I am showing it for example.
Moving p tag inside the div.blocks can do this with only CSS
.blocks input[type="text"]:focus ~ .paragraphClass {
display: block;
position: absolute;
top:-50px;
left: 50px;
background: #ccc;
opacity:.7;
}
DEMO
.containerTooltipXxx:hover > replace this by
.containerTooltipXxx:focus ~ .paragraphClass
{
display: block;
position: absolute;
top:-5px;
left: 50px;
background: red;
opacity:.9;
}
Your first hover selector is fine, but the second is wrong.
What you are doing with .containerTooltipXxx:focus > .paragraphClass, is selecting the immediate child .paragraphClass from a focused .containerTooltipXxx. Focus can only be used on things with input, and your container is just a div.
What you would need is a parent selector, but these are currently not available. They will be most likely in CSS4. http://www.w3.org/TR/selectors4/#subject
Currently, your best bet would be using javascript. Make an event listener for focus on the input box, and then programmatically apply a visible class to what you want to show.
Related
I'm trying to create a custom component using only CSS and HTML.
The behavior of the component will be like: when the input is selected (has focus) another container is open.
The problem is when the container is opened the input lose focus and the container is closed on first click :(
So How can I have that input focus focused when I'm on the opened container focused ?
<div class="block">
<label>Field</label>
<input type="text" tabindex="-1"/>
<div tabindex="-1" class="infront">
Keep this bastard open.<br/>
<br/>
while clicking on this div
</div>
</div>
CSS
.block{
position: relative;
display: inline-block;
margin: 50px;
}
.infront{display: none;}
.block input[type="text"]:focus ~ .infront {
display: block;
position: absolute;
top:100%;
width: 80%;
right: 0;
background: #ccc;
opacity:0.8;
}
Fiddle:
You need to take care of the state of .infront container states as well.
Update your CSS to this
.block input[type="text"]:focus ~ .infront
, .infront:hover
, .infront:active
, .infront:focus {
display: block;
position: absolute;
top:100%;
width: 80%;
right: 0;
background: #ccc;
opacity:0.8;
}
I think you can not do it only with HTML and CSS. You will need some jquery code like this:
$(.block input[type=text]).on('focus', function(e) {
$('.infront').show();
});
This question already has answers here:
How to change the strike-out / line-through thickness in CSS?
(11 answers)
Closed 8 years ago.
Yesterday with one friend discuss for change height of line about strike-through.
Today searching on documentation of CSS says :
The HTML Strikethrough Element (<s>) renders text with a strikethrough, or a line through it.
Use the <s> element to represent things that are no longer relevant or no longer accurate.
However, <s> is not appropriate when indicating document edits;
for that, use the <del> and <ins> elements, as appropriate.
And seems that <s> accept all reference of CSS but not function on height.
CSS:
s {
color: red;
height: 120px
}
HTML:
<br /><br />
<s >Strikethrough</s>
There is a simpler demo on JSFIDDLE and you see that not change the height of line....
There is a alternative solution or I wrong on CSS?
EXPLAIN WITH IMAGE
I think the best way to handle this is to use a pseudo element to simulate the desired behavior.
s {
color: red;
display: inline-block;
text-decoration: none;
position: relative;
}
s:after {
content: '';
display: block;
width: 100%;
height: 50%;
position: absolute;
top: 0;
left: 0;
border-bottom: 3px solid;
}
The border inherits text-color and you gain full control over your styling, including hover effects.
JS Fiddle here
I've wanted to do this before and came up with this:
<span class="strike">
<span class="through"></span>
Strikethrough
</span>
and:
.strike {
position:relative;
color:red;
}
.strike .through {
position:absolute;
left:0;
width:100%;
height:1px;
background: red;
/* position of strike through */
top:50%;
}
JS Fiddle here
and if you want multiple strike throughs you can use something like this:
JS Fiddle - multi strikes
This is my alternative version.
s {
color: red;
position: relative;
text-decoration: none;
}
s:after {
position: absolute;
left: 0;
right: 0;
top: -10px;
content: " ";
background: red;
height: 1px;
}
JSFiddle demo
Try this
s {
color: red;
text-decoration: none;
background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 12px,transparent 9px);
height: 100px
}
I've been playing around with this, and I thought it would be pretty simple. What I'm trying to do is hover over the 'NEW' label. Once in its hover state, change the content from 'NEW' to 'ADD' using only CSS.
body{
font-family: Arial, Helvetica, sans-serif;
}
.item{
width: 30px;
}
a{
text-decoration:none;
}
.label {
padding: 1px 3px 2px;
font-size: 9.75px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
white-space: nowrap;
background-color: #bfbfbf;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-decoration: none;
}
.label.success {
background-color: #46a546;
}
.item a p.new-label span{
position: relative;
content: 'NEW'
}
.item:hover a p.new-label span{
display: none;
}
.item:hover a p.new-label{
content: 'ADD';
}
<div class="item">
<a href="">
<p class="label success new-label"><span class="align">New</span></p>
</a>
</div>
Here's a JSFiddle to show you what I'm working with.
The CSS content property along with ::after and ::before pseudo-elements have been introduced for this.
.item:hover a p.new-label:after{
content: 'ADD';
}
JSFiddle Demo
This exact example is present on mozilla developers page:
::after
As you can see it even allows you to create tooltips! :) Also, instead of embedding the actual text in your CSS, you may use content: attr(data-descr);, and store it in data-descr="ADD" attribute of your HTML tag (which is nice because you can e.g translate it)
CSS content can only be usef with :after and :before pseudo-elements, so you can try to proceed with something like this:
.item a p.new-label span:after{
position: relative;
content: 'NEW'
}
.item:hover a p.new-label span:after {
content: 'ADD';
}
The CSS :after pseudo-element matches a virtual last child of the
selected element. Typically used to add cosmetic content to an
element, by using the content CSS property. This element is inline by
default.
.label:after{
content:'ADD';
}
.label:hover:after{
content:'NEW';
}
<span class="label"></span>
This little and simple trick I just learnt may help someone trying to avoid :before or :after pseudo elements altogether (for whatever reason) in changing text on hover. You can add both texts in the HTML, but vary the CSS 'display' property based on hover. Assuming the second text 'Add' has a class named 'add-label'; here is a little modification:
span.add-label{
display:none;
}
.item:hover span.align{
display:none;
}
.item:hover span.add-label{
display:block;
}
Here is a demonstration on codepen: https://codepen.io/ifekt/pen/zBaEVJ
I am looking for the easiest, most maintainable way to do this:
These are text slugs that will be appended to certain images throughout the site. They all say this same thing, but the images are varied and come from a CMS.
I know how I would do it with the image set to position relative and a div with "there's a better way" in an absolutely positioned child div.
However, since that requires HTML added to every image that gets this treatment, I was looking for a way to do this with a css class using the :before pseudo element. So far, applying the class to a wrapping link has no effect:
<img src="imagepath" alt="">
.tabw img:before {
content: 'theres a better way';
color: red;
font-size: 18px;
}
Is this sort of thing possible? Having the whole thing in CSS means all I have to do is have the CMS apply the class attribute when needed.
Yeah, ::before and ::after don't work on images. But you can apply them to the wrapper
link:
a{
position: relative;
}
a, a > img{
display:inline-block;
}
a::before{
content: 'theres a better way';
position: absolute;
left: 0;
top: 0;
width: 80%;
height: 20px;
left: 10%;
background: #000;
opacity: 0.4;
color: red;
font-size: 18px;
}
demo
If you want the text added in the HTML, you'll have to put a real element with it in your link (and apply the same rules to it, but without content)
I'll do it like this with jQuery :
Html
<div class="thumb">
<img src="http://www.zupmage.eu/up/NvBtxn7LHl.png" alt="cover"/>
<div class="caption">My caption</div>
</div>
Css
.thumb {
position:relative;
width:230px;
height:230px;
}
.thumb img {
max-width:100%;
}
.thumb .caption {
display:none;
position:absolute;
top:0;
height:20px;
line-height:20px;
width:100%;
text-align:center;
background:rgba(255,255,255,0.5);
}
JQuery
$('.thumb').hover(function() {
$(this).find('.caption').fadeIn();
}, function() {
$(this).find('.caption').hide();
});
See fiddle
NOTE TO ANYONE FINDING THIS THREAD: In Firefox 21 and IE 9/10 this did not work right with oversized images. It forced the images to 100% even if globally set to max-width: 100%
I had to follow the answer I selected above but set the A tag to display:block instead of display:inline-block to fix.
I'm trying to remove all effects on a HTML Button element.
The HTML:
<div id="go">
<button onclick="load.update(true,cards.id);" type="submit"></button>
</div>
The CSS:
#header #go button{
display:block;
border:0 none;
cursor:pointer;
outline:none;
vertical-align:top;
width:18px;
height:33px;
background:url('../images/cards/go.png'); //Just an image to replace it all.
}
In Chrome and Firefox this works fine, but in IE (8 at least) the "push" effect of the button is still there when the button is clicked (EG the offset)
Is there any Tricks i can use to remove this effect?
Thanks in advance!
Diesal.
you need to add background styles to :hover :active :focus as well.
#header #go button:hover {
border: none;
outline:none;
padding: 5px;
background:url('../images/cards/go.png');
}
#header #go button:active {
border: none;
outline:none;
padding: 5px;
background:url('../images/cards/go.png');
}
#header #go button:focus {
border: none;
outline:none;
padding: 5px;
background:url('../images/cards/go.png');
}
I had a similar experience, and was able to fix it in IE8, but not IE7. See it working here:
http://jsfiddle.net/GmkVh/7/
HTML:
<button></button>
CSS:
button {
color:#fff;
background:#000;
border: none;
outline:none;
padding: 5px;
cursor: pointer;
height: 25px;
}
/*
It hits this state (at least in IE) as you're clicking it
To offset the 1px left and 1px top it adds, subtract 1 from each,
then add 1 to the right and bottom to keep it the same width and height
*/
button:focus:active {
padding-top: 4px;
padding-left: 4px;
padding-right: 6px;
padding-bottom: 6px;
color: #ccc;
}
One way would be to get rid of the <button> tag completely and use a <a href=".." /> tag in its place styled the way you want.
Just have the link do a javascript postback.
update (from comments):
one example:
Click Here
Of course, this requires javascript to be enabled and is considered by some to be an abuse of the anchor tag.
There are alternate versions if you are using .net webforms or jQuery.
After you have done whatever you like with the border etc., just put a span inside the button around the text like so:
<button class="button" type="submit"><span class="buttonspan">Blah</span></button>
Then the CSS becomes:
button {position:relative; width:40px; height:20px /* set whatever width and height */}
buttonspan {
height: 30px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
<div class="calculation_button">
<button type="submit"><span>Count</span></button>
</div>
.calculation_button span {
position: relative;
left: 0;
top: 0;
}
works for me in IE and FF
The following helped for me in IE 10:
button:active {
position: relative;
top: -1px;
left: -1px;
}
It fixed the top perfectly, but left still had background bleed-though for my case. Still looks a bit odd if the user starts clicking and then moves the mouse off the button. Also obviously only enable the rule for relevant IE version(s).
Position relative seemed to have taken care of the problem
Simply have a wrapper within the button:
So
<button>
<div class="content">Click Me</div>
</button>
and set the DIV to position relative with top: 0, left: 0
Example below:
http://jsfiddle.net/eyeamaman/MkZz3/
It's a browser behaviour, a simple solution is to use a link tag instead of button (since you're calling a javascript function).
<img src="myimg"/>
If you still want to use the , I've found that there are some characteristics on each browser (in a simple debug):
Chrome adds outline and padding
Firefox adds a whole lot of stuff with the standart button border
IE messes with the inner text position
So to fix them, you have to manipulate the pseudo selectors for the button behaviour. And for IE, a good solution is to envolve your text on a element, and make it relative positioned. Like so:
<button type="button" class="button"><span>Buttom or Image</span></button>
<style>
button,
button:focus,
button:active{
border:1px solid black;
background:none;
outline:none;
padding:0;
}
button span{
position: relative;
}
</style>
Pen
This is a duplicate question