I am trying to style the HTML input range and it works as I expected on webkit browsers but my styling for -moz- browsers doesn't seem to work. I was trying to use pseudo elements before and after on the moz-range-thumb but Firefox doesnt support that maybe? I couldn't find any proper documentation on this. But if someone can help me come up with a solution to this I'd really appreciate it.
This is the moz styling I applied which is the same as for webkit browsers:
input[type=range]::-webkit-slider-thumb:before {
position: absolute;
top: 5px;
left: -2000px;
width: 2000px;
height: 6px;
margin-left: -2px;
background: #666;
content: ' ';
}
JSFiddle
For firefox just added background: #fff; to input style and it rendered exact as chrome. if it doesn't work with you we can check your firefox version.
Perfect explanation of the reason is given here.
:before and :after render inside a container
Pseudo-elements can only be defined (or better said are only supported) on container elements. Because the way they are rendered are within the container itself as a child element. input can not contain other elements hence they're not supported.
As a cross-browser workaround you can use the pseudo-elements on the input's label tag instead. That worked for me.
Related
I want to hide the border of a recaptcha v2.0 widget so that I can better visually integrate it into my site's look and feel.
NOTE: I'm posting this as a question, and providing a solution, because most of the StackOverflow questions I've found on the topic center around removing the frameborder attribute of the recaptcha's iframe, which isn't technically what I'm after. I'm after the result of that -- an edgeless recaptcha widget that I can position within a larger visual context.
I hope this is helpful!
I wanted to hide the borders of a v2.0 ReCaptcha (the one with the "I'm not a robot" checkbox), and solved it as follows:
Wrap the recaptcha div (the one that is marked with the class "g-recaptcha") with another div, and size it a bit smaller than the iframe comes in at, and shift the iframe using position: relative and left: -10px, to hide the borders.
If you're using the "compact" version, you'll need to adjust the sizing... the css I provide works for the "normal" version.
NOTE: Tested on Safari 9.1.2 (OSX) only, but I'd guess the technique will translate to other browsers too.
Hope this helps!
html:
<div class="my-div"><div class="g-recaptcha" data-size="normal" data-sitekey="<your site key>"></div><div>
css:
.my-div {
display: inline-block;
overflow: hidden;
width: 290px; /* note the embedded iframe is 302x76 */
height: 74px;
text-align: left;
}
.my-div iframe {
position: relative;
left: -10px;
}
NOTE: for people brought here by google but with different problem
If you want to hide just borders not making it edge less keeping original design just do following:
HTML:
<div class="captcha"><div class="g-recaptcha" data-size="normal" data-sitekey="<your site key>"></div><div></div>
CSS:
.captcha iframe {
position: relative;
box-shadow: none !important;
}
I have a control that I am trying to highlight when it is selected. I'm achieving this using padding on a div and some positioning so that it surrounds the control. The problem I'm encountering is that the padding on the highlighter div renders differently in chrome and in firefox. Everything I've read says that they render the same so this shouldn't be a problem.
Chrome:
Firefox:
Here's a fiddle that has the problem on it:
http://jsfiddle.net/5fuGB/1/
.control{
position: absolute;
width: 100px;
height: 20px;
top: 30px;
left: 300px;
z-index: 1;
}
.highlighter{
background-color: orange;
position: absolute;
width: 100%;
height:100%;
left: -2px;
top: -2px;
padding-right: 8px;
padding-bottom: 10px;
z-index: -1;
}
input{
width: 100%;
height: 100%;
}
My Chrome Version:
Version 31.0.1650.63 m on Windows 7
My Firefox Version:
25.0 on Windows 7
Thanks for any help you guys can offer.
I believe the difference you are seeing is a difference which comes from the user agent stylesheet, browsers have their own default stylesheets which they use to render things like input elements. In your case it is probably a difference in the padding applied to the input element. You should specifically set eg: padding: 0px; or padding: 1px; on the input element, and then work out how to get it to look right for an input with the specified fixed padding. This will then override the styles set by the user agent style sheet.
Update
I moved to my Windows PC to have a go at fixing it. One way to fix this using one of the vendor specific prefixes from the answer linked in the comments is to add -moz-padding-end: 6px; to .highlighter to compensate for the differences in padding between browsers.
Here's a jsFiddle which fixes your issue, a footnote tho, I can already tell you that this probably won't fix it on Chrome for OSX, which was also rendering things the Firefox way.
Another way to fix this is by adding -moz-padding-start: 1px; -moz-padding-end: 1px; to input, but doing so somehow changes the bottom padding as well, which makes things look not as pretty in Firefox as with the other fix.
I'd go about it differently. Instead of using an extra div, I'd recommend using a combination of border-color and box-shadow on the input's :focus state to achieve the effect you're going for.
Check out this modified fiddle: http://jsfiddle.net/5fuGB/2/
Just experienced the same issue with my code, and fixed it too. The trick is if you use display: inline-block then line-height makes sense. Try it when debugging your code.
You're doing a little more than what's necessary. To get a highlight around that input you can use :focus
So it would be something like this:
CSS
input {
border: 1px solid white;
}
input:focus {
border: 1px solid orange;
}
That will give the input a white "invisible" border so it doesn't move the input when you click into it. It will simply change the border color to orange to get that highlight effect you're looking for.
EDIT
Just saw your comment. I dont have the rep to comment so I'll just add on to this.
If you aren't using the inputs as actual inputs, then I would just make them divs. Inputs render differently by default so that would mess with consistency across browsers.
I'd also recommend experimenting with those divs within one another and making the most outside div relative.
Outside Div <------ position:relative;
Middle Div <------- position: absolute;
Inner div <-------- position: absolute;
Also, if you need a selected state but don't want or are hindered by inputs then I'd recommend jQuery for modifying the css based on user interaction.
I've spent a few good hours debugging myself, and a few good hours researching but nothing seems to be solving my problem. I have a caption in my header that is supposed to be cut-off at the bottom, which looks fine in Safari and Chrome, but in Firefox it is positioned much higher:
First window: Firefox
Second window: Safari (chrome renders the same)
I spent about an hour and a half changing everything around in my CSS thinking it had to do with other elements around it, but made no progress. Finally I decided to make an extremely simplified version to see what the problem is:
First window: Firefox
Second window: Safari (chrome renders the same)
Same exact thing. I have a CSS reset applied so that is not the problem. I've tried setting the line-height, but that didn't fix it. I've tried every value for the CSS display property. Nothing is fixing this.
HTML/CSS for test example above:
<div class="test">
<h1>Test</h1>
</div>
.test {
margin: 0;
padding: 0;
width: 100%;
height: 185px;
line-height: 185px;
border: 1px solid red;
}
.test h1 {
font-size: 12em;
}
My website can be viewed at samrapdev.com.
Quick link to CSS stylesheet
In short, I need to figure out how to get both browsers to display the text at exactly the same height
Try and specify a font-family in your stylesheet though it's not pixel perfect
#header .youAreHere h1
{
...
line-height:1;
}
line-height must be set on h1, unless you have something like
* {line-height:inherit;}
Even if you take a webfont and define the line-height of your element you can have variations due to the line-heights of the other elements.
What works for me is to define the line-height of the body on the top of using a webfont.
Also do not forget to reset margins and paddings for all elements you're using. A good trick is to use a reset.css before your actual style sheet (you can find some at http://www.cssreset.com/)
body{
line-height: 1;
}
Question
Can I style just a part of a single character?
Meaning
CSS attributes cannot be assigned to parts of characters. But if you want to style only a certain section of a character, there is no standardized way to do that.
Example
Is it possible to style an "X" which is half-way red and then black?
Not working code
<div class="content">
X
</div>
.content {
position: relative;
font-size: 50px;
color: black;
}
.content:after {
content: 'X';
color: red;
width: 50%;
position: absolute;
overflow: hidden;
}
Demo on jsFiddle
Purpose
My intention is styling the Font Awesome icon-star symbol. If I have an overlay with dynamic width, shouldn't it be possible to create an exact visualization of scores?
While playing around with a demo fiddle, i figured it out myself and wanted to share my solution. It's quite simple.
First things first: The DEMO
To partly style a single character, you need extra markup for your content. Basically, you need to duplicate it:
<div class="content">
<span class="overlay">X</span>
X
</div>
Using pseudo-elements like :after or :before would be nicer, but i didn't found a way to do that.
The overlay needs to be positioned absolutely to the content element:
.content {
display: inline-block;
position: relative;
color: black;
}
.overlay {
width: 50%;
position: absolute;
color: red;
overflow: hidden;
}
Do not forget overflow: hidden; in order to cut off the remaing part of the "X".
You can use any width instead of 50% which makes this approach very flexible. You can even use a custom height, other CSS attributes or a combination of multiple attributes.
Extended DEMO
Great work on your solution. I’ve got a version that uses :after (instead of duplicating the content in the HTML) working in Chrome 19.
http://jsfiddle.net/v5xzJ/4/
Basically:
Set position:relative on .content
Position :after absolutely
Set :after to overflow:hidden
Adjust the width, height, text-indent and line-height of :after to hide bits of it.
I’m not sure if it’ll work well cross-browser though — the em values will probably work out a bit differently. (Obviously it definitely won’t work in IE 7 or below.)
In addition, you end up having to duplicate the content in your CSS file instead of the HTML, which might not be optimal depending on the situation.
Usually <legend> text is pretty short so I had no idea this was a problem until I ran into it yesterday. I was trying and failing to set a 50% width on a <fieldset>, but it wouldn't work due to long legend text. Either the fieldset won't be smaller than the legend, or the legend's width exceeds that of the fieldset.
This doesn't seem to be an issue in IE8, Chrome, Safari, Opera, and maybe others. It is an issue in Firefox, IE6, and IE7.
Goal: Get text to wrap in a <legend> cross-browser
Without setting any fixed widths
Hopefully without extra markup
Without javascript
Any way we can if the above are impossible
Without giving up and using a different tag
I've seen this post: Getting LEGEND tags to wrap text properly
...But there is only a single answer that uses a <div> with a fixed width inside the legend tag, I can't actually get it to work (see fiddle), and OP closed with the comment "in the end we gave up". Googling this subject turns up a whole lot of "not much" as well.
I put up a jsfiddle demo with some CSS I've tried. As I said, I've never run into this before so I'm baffled that this is so difficult, and I can't seem to get anything to work. Is it really just impossible?
Adding white-space: normal; to the legend works fine except in IE7 and IE6. Please see this jsfiddle demo
After playing around a bit with the CSS, I got it work on IE7, IE8, IE9, FF3-4, and Chrome11 by adding a <span> inside the <legend> with the below CSS:
legend {
white-space: normal;
width: 100%;
*margin-left: -7px;
}
legend span {
display:block;
width: 100%;
}
Please have a look at this jsfiddle
It's been a while since the question was posted, but now IE10 is here for some time and still sux while beeing so 'modern'. additionally one has no ability to use conditional comment. Here's what does the trick:
legend {
white-space: normal;
display: table; /* IE10 */
}
Add white-space:normal to your legend to force the text to wrap.
legend{
color:green;
white-space:normal;
}
For more read this article: http://beckism.com/2008/12/display_block_legend/
Try this simpler approach:
legend{
color:green;
white-space: normal;
}
That should sort your legend out. Your next problem becomes the background color of your fieldset, but that's easily solved by wrapping the whole thing in a div and styling that.
In case somebody needs a fix that works for Microsoft Internet Explorer 11 and Edge while not interfering with Chrome/Firefox/Safari:
legend {
display: table;
max-width: 100%;
}