I am working on a CSS userstyle and the problem is that I can't seem to modify images in buttons coded into a web page's html code:
<button type="submit" class="btn btn-default"><img alt="Ico-plus" src="//s.theoldreader.com/assets/ico-plus-369f50fa00968793b3c2e814f3e55de5.png"><i class="fa fa-spinner fa-spin" style="display:none;"></i></button>
the closest i can get to changing this through CSS is to change the code of the actual button and change its background through .subscribe-button-container .subscribe .dropdown-menu li form .control-group button{background-image:url("http://i.imgur.com/XYHilSy.png");}, rather than replace the image contained within it. It is possible to achieve what I am trying to do, or are such images simply hardcoded into the HTML?
I read these:
How to change an input button image using CSS?
Adding an image to submit button using CSS
Submit Button Image
but they all assume that I can modify the html code, while I can only try to override the css
You cannot modify HTML with CSS, you can only modify the appearance of HTML. Since the image url of an <img> is specified in HTML, you can't change it.
Here's what you can do:
Hide the image (display: none or opacity: 0)
Specify a background image for the button
Using a pseudo element as a sort of "stand-in" image tag may be worth exploring.
This solution will provide you with more flexibility in regards to styling this element in ways that wouldn't be possible with background images.
Think of the :pseudo-elementin this case as your "artificial img element" which serves as the "replacement" for the original img element you have now hidden.
.btn img {
display: none;
}
.btn:before {
content: "";
display: block;
background: url(https://s.theoldreader.com/assets/ico-plus-369f50fa00968793b3c2e814f3e55de5.png);
max-width: 18px;
max-height: 18px;
width: 18px;
height: 18px;
}
<button type="submit" class="btn btn-default"><img alt="Ico-plus" src="//s.theoldreader.com/assets/ico-plus-369f50fa00968793b3c2e814f3e55de5.png"><i class="fa fa-spinner fa-spin" style="display:none;"></i></button>
MDN
::before creates a pseudo-element that is the first child of the
element matched. It is often used to add cosmetic content to an
element by using the content property. This element is inline by
default.
https://developer.mozilla.org/en-US/docs/Web/CSS/::before
Related
I've designed how my buttons would look in an external app and saved it as an image to use for my webpage, and I want to code the webpage so that when I hover over the button, it changes to the image of the button I've designed - is there a method to do this with html.css?
the current html code:
<div class = 'comment'>
<a href = "hidden_comments.html">
<img src='commentbar.jpg', width=90px>
</div>
the css code:
.comment{
display: inline;
margin-left: -10px;
}
Yes it's possible. have :hover as selector on the element in css. And add background-image part of css, for example below:
div:hover{
background-image: url("paper.gif");
}
It is not recommended to use CSS hover to do it. You may want to change image dynamically and you can not do it with CSS.
Here you can find an exact solution
Right now if i add inactiveLink class to <a> it also affects buttons inside. They cant be clicked anymore. Do i have to make another style activeLink that turns those features back on or is there a way to only affect <a> element without affecting buttons inside?
If there is no other way, what are default cursor and pointer-events for Buttons?
HTML
<a class="text-body selectable-element inactiveLink">
[...]
<button>Click</button>
</a>
CSS
a.inactiveLink {
pointer-events: none;
cursor: default;
}
While the other answer will work (it was deleted as I was typing this), the real question is: If you want the anchor deactivated, should an active button really go inside it?
As the site/app scales, will other developers know what that class does? I think the CSS is fine the way it is, but the HTML could be moved around so those active elements exist outside the inactive anchor (perhaps in a shared parent element). Food for thought!
If you just want the quick fix, add the class "always-active" to the button, and add the following CSS:
.always-active {
cursor: auto;
pointer-events: auto;
}
a.inactiveLink {
pointer-events: none;
cursor: default;
}
button.always-active {
pointer-events: auto;
cursor: auto;
}
<a class="text-body selectable-element inactiveLink">
[...]
<button class="always-active" onClick="alert('it works')">Click</button>
</a>
I'm currently trying to perform a global update on all our sites that pull the central fonts stylesheet, in this update I'd like for it to add some spacing in between the icon provided by Font Awesome and some plain text that follows it in order to keep original styling and to center the icons vertically on that text.
That being said, I've already got it to center vertically since we only use small icons. I've been giving this a go for a little bit and this is what I've come up with:
#import "font-awesome-4.4.0/css/font-awesome.min.css";
.fa {
color: inherit;
vertical-align: middle;
display: inline-block;
line-height: inherit;
}
.fa:only-child {
margin-top: -3px;
}
.fa + * {
margin-left: 5px;
display: inline-block;
vertical-align: middle;
}
for the most part it does pretty good, what's weird though is that the .fa:only-child rule will apply, and the .fa + * rule does NOT apply when the icon tag is placed next to plain text like:
<button><i class="fa fa-save"></i>SAVE</button>
but the .fa + * WILL apply if the icon tag is placed next any other html tag (also failing the :only-child pseudo-class) like:
<button><i class="fa fa-save"></i><span>SAVE</span></button>
but in doing so, I'd need to update every page to include new tags (which could take weeks possibly) and I'd need to correct the styling for those span tags to inherit everything from the parent.
I've also attempted a javascript solution but I didn't really like the fact of having to iterate through each DOM element looking for the occurrence, nor did I like that it would need to be re-run upon dynamic content being added.
Is there a way to solve this without doing any of the above scenarios?
I also need to serve instances where the button contains no text, only an icon like:
<button><i class="fa fa-save"></i></button>
so unfortunately I can't just give all the .fa instances a margin of 5px.
tl;dr: I want to add 5px of margin in between any tag containing class .fa and whatever follows it, including plain text
~Thanks in advance~
The problem, as stated in the comments, is that CSS does not target plain text. So that's a dead end.
However, we can use a trick, based on HTML's whitespace collapsing. If there's a space inside the button at the very end, the browser will treat it as if it's not there. In other words, a space after the <i> right before the </button> will be ignored.
The solution, therefore, is to put a space in the .fa::after.
This only works if the .fa itself is an inline element, otherwise the space will be ignored right there, so we will have to change its display value back, and we may have to fiddle around with some other margins to get it right.
In this example, I have reduced all margins and paddings as much as possible, so you can see there is no space in the button when there's just the icon, only when there's also plain text.
/* emulate FontAwsome */
.fa {display:inline-block;font:normal normal normal 14px/1 FontAwesome;
font-size:inherit;text-rendering:auto;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale}
.fa-save:before,.fa-floppy-o:before {content:"\1F4BE"}
/* Added by me */
button {border:4px outset rgba(128,128,128,.7); padding:0; font-size:20px;}
button::-moz-focus-inner {padding: 0; border: 0}
button .fa {display:inline;}
button .fa:after {content:' '}
<button><i class="fa fa-save"></i></button>
<button><i class="fa fa-save"></i>Save</button>
I have an icon set and CSS code to bind the icons to an element, but I can't get the "i" tag to work with the icon set w/o filling it with content. Do I have to add custom code for the tag?
I've seen Twitter Bootstrap use the "i" tag for icons.
Also, I've tried the span tag, and that doesn't work either. It works when I use "li" or "div" tags, tho.
What am I missing? Thanks in advance!
This does not work
<i class="icon icon-accessibility"></i>
This works
<i class="icon icon-accessibility">BLAH</i>
example of my CSS
.icon {background: url('/images/icons.png') no-repeat top left;}
.icon-accessibility{ background-position: 0 0; width: 32px; height: 32px; }
The <i> tag is used to signify that the text within should be italic. It doesn't make sense to use it in this context.
If you still want to keep it and not use something else like a div, the problem is that the <i> tag is an inline element, not a block element like a div. Add display: inline-block; to your CSS and it will work.
You can just use an img tag to display the icon. This makes more sense semantically since it is embedded content after all, and the icon will be palpable.
Semantics aside, you're not seeing anything because the <i/> element is inline by default. You likely want to add display: inline-block; to the .icon ruleset to match how Bootstrap renders their icons.
If you care about semantics, use a <div/> or <span/> instead.
Brthr, just add a 'display: inline-block' to your '.icon', it might work
Let's say I have the following:
<style>
.myLabel {
color: blue;
}
.myLabel:hover {
color:red;
}
</style>
<div>
<img src='myimage.png' />
<span class='myLabel'>Image Label</span>
</div>
Is it possible to replace the image (also via css) when they hover over the span? If so, how could I do that?
There don't seem to be any sibling selector for previous siblings.
W3 defined adjacent siblings and some browser support seems to be available for general siblings -- but, both are for following sibling(s).
So, I think you'll find it easier to accomplish with :hover set to the div.
And, I've never heard of CSS being capable of altering a src attribute. About the only way I can think that might work to alter an image via CSS is to have src a transparent image and alter background-image.
<style>
.myLabel img { background-image: url('...'); }
.myLabel span { color: blue; }
.myLabel:hover img { background-image: url('...'); }
.myLabel:hover span { color:red; }
</style>
<div class='myLabel'>
<img src='transparent.png' />
<span>Image Label</span>
</div>
An easier way to do this would be to remove the img element and make the image a background image on the span. Then you can control the background image in your two CSS rules:
.myLabel { color: blue; background-image:url(myimage.png) }
.myLabel:hover {color:red; background-image:url(myotherimage.png) }
Then you just need some CSS to position the background image, and probably to add enough padding for the background image to not overlap any text.
You could also put the image inside the span:
<div class='myLabel'>
<span>
<img src='transparent.png' />
Image Label
</span>
</div>
Then your css would be:
.myLabel span:hover img { ... }
FYI Only <a> tags work with :hover in IE6 (but it's old anyway)
No, you can not replace the value of the src-attribute in any way.
Jonathan Lanowski Said:
And, I've never heard of CSS being capable of altering a src attribute. About the only way I can think that might work to alter an image via CSS is to have src a transparent image and alter background-image.
Keep the meaning of the IMG-element in mind. It's supposed to show an image as content, not presentation. If you put a transparent .gif or whatever in the src-attribute, you also remove content from the page.
The same applies to using different CSS-hover-techniques to change the image, you still remove the content as long as you don't have an actual image in the src-attribute. Plus, you won't be able to change the image while hovering the span-element as long as your document is marked up the way it is.
So then, this is a typical Javascript-job.
one technique is to have a single image file have multiple images in it and you use css rules to change the offset within the file to show.
see: http://www.alistapart.com/articles/sprites/
specifically the "Hovers" section.
They offer a functional example here:
http://www.alistapart.com/d/sprites/ala-image3.html
EDIT: I just realized that you asked to make the image change then the hover over the span not the image itself. To do that, I believe you would need to use javascript.