I have a document that I can't edit the HTML of (a payment page on Shopify) so for security reasons, they don't allow you to edit this (unfortunately, same as the javascript).
You can however, edit your own css. So this is why it must be css only if possible.
I want to basically replace text via css. I know that this itself isn't possible, but this is how I've managed to do the next best thing:
HTML
<P>This is some nice text here</p>
CSS
p:before{
content:'This text has replaced the original.';
visibility:visible;
}
p{
visibility:hidden;
}
JsFiddle - Codepen (for viewing in IE8/EI9)
For the most part, this works and for now is our preferred method.
However, in IE8/EI9, visibility is not supported. (Source)
I've tried other methods such as:
display:none;
and
opacity:0;
but both of them hide :before.
I have also tried to change the text color to the background color, but we don't like the idea of having the text still on screen if highlighted (I know, beggars can't be choosers).
My question is: Are there alternatives to this approach that work in IE8/EI9?
Thanks.
You could use font-size : http://codepen.io/anon/pen/KuJln
p:before{
content:'This text has replaced the original.';
font-size:16px;/* if rem not supported */
font-size:1rem;
}
p{
font-size:0.01px;/* 0+ for ie , yep :) */
}
You can change the color.
http://jsfiddle.net/Epte8/1/
If you don't have a solid background, you could use rgba for IE9 to set the transparency of the color, but that is unfortunately not supported in IE8 (I don't think you can set a transparent text color there).
Related
I don't want my html tags to change color and background when there is double click on it as you can see in this picture "Question" changes its color to white and background to blue when I doubeclicked on it. How I can solve this problem?
What you're referring to is a css ::selection attribute. The color isn't really changing, this is a native browser behavior to help users select and copy text. You can get rid of it but you must understand that you'll be breaking a very important usability pattern. People expect selection to work, even if it is stylized it should be there.
I would strongly advise you not to disable this behavior but customize it to fit your design if you really must.
p::selection {
color: red;
background: yellow;
}
div::selection {
color: green;
background: blue;
}
<p>Questions that may already have your answer</p>
<div>Another option of text highlight</div>
That's the default selection behavior for your browser. If you want to disable selection altogether you can use user-select: none; on your element.
I want to deactivate the Chrome's default CSS like the input field background-color and all other stuff but i dont know how. Someone can explain me what i should do ? I should add some piece of code to my CSS file i guess.
To be more specific one of my problems is that i want to make an input text field with black background with background opacity of 0.5 and with white text color. So i made it and it work on IE or Mozilla but doesn't work on Chrome.
So all i want is to make my website's css to look same on Chrome as on Mozilla or IE.
Don't use it on the radio or checkbox inputs any time as they can end up looking like an unuseful skinny rectangle.
input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="file"]),
select,
textarea {
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
I've made this fiddle, to demonstrate my problem and question.
I want to have the div that holds all the text have an opacity so that you can see the background (for some reason the background won't show up, works on my machine).
However, in my example all the text has got the same opacity, and that isn't useful for reading.
So basically, how do you have full opaque text, I assume that any child elements will be set to the opacity setting of the parent?
html:
<div class="mainPage">
<h1>Welcome</h1>
<p>... some text ...</p>
</div>
css:
.mainPage {
opacity:0.6;
}
You want to use
.mainPage {
background:rgba(0,0,0,0.6);
}
where 0,0,0 represent black (255,255,255 would be white then) and 0.6 alpha channel
but it is CSS3 so check for the compatibility. Also if you want to this to work in older versions of IE, you could consider PIE CSS
EDIT: As other have mentioned, there are other solutions possible here. To use repeating transparent 1x1px image as your background (which will not work in IE6 if you care?), there are also some php scripts to include to your css that will generate those images automatically for you.
Or another solution would be to use another div with opacity and position it absolutely behind your content, so that div wouldn't contain your content but anyway would be behind.
Opacity affects whole element, so there is no way to do that just using "opacity".
You may set RGBA color to background (last argument is opacity), use transparent BG image or create another div (wrapper) with opacity.
If you need support old browsers, see fiddle with wrapper:
http://jsfiddle.net/nick4fake/N78G8/
<div class="a"><div class="b b2"></div>My text example</div>
<div class="b">My text example</div>
Here b2 is wrapper class.
Also, check this link:
http://css-tricks.com/forums/topic/css-transparency-in-wrappers/
Two possibilities:
Use rgba colours:
background-color:rgba(255,255,255,0.6);
Though you'll want to check the compatibility of this, as it's CSS3. The only browsers that it doesn't work in are Internet Explorer 6, 7, and 8 (and less), so you might be ok using this - it works in all other major browsers.
Make a semi-transparent PNG in Paint.NET, Photoshop, or some other similar program, and use that as the background image:
background-image:url("./myTransparentImage.png");
This has the benefit of working on pretty much every browser, except probably IE6 and the like as it doesn't support alpha transparency.
You'd probably want to make it a 1px × 1px image, to keep the size down, and then that would tile across the whole element.
I'm trying to fill in the content of a text in a h1 tag by an image.
Following my understanding ;-), I'm doing the following in the html:
<div class="image_clip">
<h1>
MY WONDERFULL TEXT
</h1>
</div>
And in the css file:
.image_clip{
background: url(../images/default.png) repeat;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
The fact is that it does not yield the expected result... that is the text with the image in it as color.
The image is displayed on the entire background of the div and not only behind the text.
The text itself is moreover still in black.
I'm trying that on Firefox. Don't have other browsers.
Did I missed something?
Tks for the help.
Whilst -webkit-background-clip:text exists, -moz-background-clip:text does not, so you won’t be able to achieve your clipping effect in Firefox. (Unless there’s another way I can’t think of.)
Neither does -moz-text-fill-color, although you could just use color:transparent, as long as the element doesn’t have anything else (e.g. borders, -wekbit-text-stroke) that you want to be visible.
Your code does work in Chrome and Safari:
http://jsfiddle.net/7T8am/2/
However, the <h1>’s text does need to be transparent, so if any other CSS code is setting a colour for the <h1>, you’ll need to override it.
Per the standard, the background-clip property (which is implemented without a prefix in Firefox, by the way), doesn't have text value. You're using a proprietary WebKit feature, not a standard CSS property....
You are applying the style to the enclosing div, not the h1 tag. Try changing your selector to be .image_clip h1 {your:styles;}, or alternatively you can leave your CSS the same and apply the class to the h1 with <h1 class="image_clip"></h1>.
To get background-clip:text to give the anticipated appearance in Firefox you could use this polyfill - https://github.com/TimPietrusky/background-clip-text-polyfill - that replaces the CSS with an SVG version in non Webkit browsers. [untested but seen working]
Whenever we select some text, the entire text area gets highligted. like this .
but is there any way to do away with this highlighting? I want just the color of the text to change and not the area to be highlighted as it appears in the image? am I clear enough?
Depends on which browsers you need to support. Not sure if Internet Explorer does support it, but here are the three CSS pseudo-elements you can try:
::selection (works in my Chrome)
::-moz-selection
::-webkit-selection
For example:
p::selection {
background:#cc0000;
color:#fff;
}
Also see http://www.quirksmode.org/css/selection.html
If you're talking about when someone selects the text in the browser (using the mouse or shift-selecting) then this isn't possible.
[UPDATE]
I take it all back - as #Dev F and #nico say, there's a selection CSS3 property. (Of course only some browsers will support this, but...)