I have textBox by default it has got background image, now I am able to remove the image on focus using CSS, but once the focus is not there image appears, so how to remove this image when then the box is not empty. I prefer doing this using CSS rather than JavaScript or jQuery.
I know you said you wanted to use css only but I can't think of a way to do this without using either js or doing it serverside with PHP (which is probably not an option)
with jquery you can simply use this check:
if($('#id_of_box').html() == "") { change css here }
You have to combine special CSS Selectors.
CSS 3 includes a ":empty" selector.
http://www.w3schools.com/cssref/css_selectors.asp
Related
I want a popup block to appear when I hover over the image as given in the picture below. How can I achieve this using css.
I have already used css to change the background on hover so how can I make the content appear.
I have been using wordpress but I couldn't find any plugin for the same.
Can anyone help with this one?
Sorry, but you can't do this with only CSS : you have to use JS for it (so if you have not learned it before, I think you should...)
CSS can apply properties on elements "selected" but only that.
If you want to get an information about an element (like whether it is hovered) and apply a propertie to another element depending on the information (like visibility:hidden), you have to use JavaScript.
Title says it all.
I'm well aware on how to do it with css but is there a way to remove the underline without using CSS ? (we're restricted on using CSS for this project)
Need to do it with pure html (no css, javascript, etc.).
You could achieve this with jQuery, but all links will be affected by this method.
For example:
$(document).ready(function() {
$("a").css({"text-decoration": "none"});
});
If you only want to remove the text-decoration of certain links, I would use inline-styling.
Like this:
Your link
An inline style would be useful if you are limited to the CSS. Something like:
Link
Another method would be to dynamically load a style with jQuery:
<script>
$(document).ready(function(){
$('a').css('text-underline','none');
});
</script>
Ideally it would be better to do this in the CSS file but this can help.
Well, first, you never said you were dealing with text. If you were, a very round-about way of doing it would be making the text an image instead and then linking the actual image.
I am creating a set of divs which the user can navigate through with tab, and I wanted to add the standard orange focus outline to the elements.
Does anyone know what I need to do to add it in? I know that it works off the outline property, but I'm not sure what color to set it as, or whether I'd be better off using a box shadow with a bit of blur to get the same effect.
Also, in case it's relevant, I'm using dojo and avoiding jquery - but hopefully this is a pure css solution :)
I would suggest this working jsFiddle, note that in order to accomplish this you will have to use <div tabindex="0"></div>.
Every browser renders the focus differently. In order to unify the entire experience on your website, I would suggest removing the browser outline with CSS and adding your own style.
As far as I know, only Chrome renders the orange outline, I've tried to match the color as best as I could, but you can always experiment on your own.
You can use the css :focus Pseudo selector
:focus {
declaration block
}
Although the div attribute does not accept input, so it cannot have :focus normally. So you would have to set the div's to have a tabindex attribute
I'm attempting to display a mailto link. Is that possible with CSS?
html
<li class="fe footer_no_link"></li>
css
.footer_column .fe:after {content:"info#site.com"; }
you cannot add html elements with the CSS3 ::after or ::before selectors. The content:"" property will only accept plain text.
You must remember that CSS is for styling purposes only. This includes the ::before and ::after selectors.
Your best option is to use a JavaScript alternative.
Your value wasn't appearing because the speech marks needed escaping, or changing:
.fe:after {content:"<a href='mailto:info#site.com'>info#site.com</a>"; }
http://jsfiddle.net/Cb2ry/
Even then though, your content will just display as static text, rather than rendered.
Content added with the pseudo-element doesn't appear in the DOM, so no you can't.
But why do you want to do it with CSS ? It is not styling, the right place seems to be directly on the HTML file.
If the goal is to block spam, I usually use this piece of javascript:
var m;
m='in';
m+='f';
m+='o#exa';
m+='mpl';
m+='e.co';
m+='m';
$ele = document.getElementById('contact-mail');
$ele.href = 'mailto:'+m;
$ele.innerHTML = m;
The mail is splitted to be sure that it doesn't appear as an email in any file.
You can see the result here: http://jsfiddle.net/tzkDt/
This might be useful to someone...
Instead of inserting the link with the css, I coded it into the html with an href & class, but left it empty. Like this:
<p>This text is always here.</p>
<a class="mobile" href="mailto:info#site.com"></a>
.mobile:after {
content:'Click here to email us.'
}
That way the link doesn't appear (height:0, width:0) until it has content.
I used it for a responsive store locator where the map was stacked on top of the location list at small screen sizes, necessitating a link to the list anchor. I considered it a "design" decision, which is the only justifiable reason to do it.
You can't add html to the content in css. Unless you escape everything.
http://jsfiddle.net/PDTng/
Alternatively, you could use jQuery and use .html(), eg:
http://jsfiddle.net/PDTng/1/
I want to change a select tag arrow with an image, and also I want to have another image as hover state, and one for pressed state. And I should do that with CSS2.1 (no CSS3 solution please). How can I do that?
Whenever I need to style selects I use http://jamielottering.github.com/DropKick/
U can use background-image property in "element name":hover,"element":visited
That is not possible to do with just CSS, you will have to make use of JavaScript to accomplish it.
The only crossbrowser way to style form fields other than text fields and buttons is using JavaScript to implement custom form-controls.