I have a jQuery dialog on two different pages. For some reason the radio buttons look different (one page is pure HTML/Javascript and the other is created by some internal framework created by the customer I'm working for).
I'm trying to figure out what to look for in the css that causes the difference in radio button presentation.
The two scenarios look like this:
Wrong:
Right:
Can anyone help with some clues as to what to look for?
Maybe I should add that both pictures are from IE8.
Styling (EDIT: borders, colors, background of) a radio button itself is not possible in css. But you can hack a bit around with hidden radio buttons and overlaid images like described here
http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/
http://www.andreapinchi.it/how-to-style-radio-buttons-with-pure-css/
Essentially you hide your radio button and put a span right at its place that, when clicked, changes its styling:
html
<label><input type="radio"><span class="overlay"></span> radio button</label>
css
input[type=radio] {
opacity: 0;
z-index: 9999;
}
/* default radio button style: unchecked */
.overlay {
display: inline-block;
position: relative;
left: -1em; /* or whatever length you need here */
height: 1em;
width: 1em;
background-color: red;
}
/* changed style when checked */
input[type=radio]:checked + .overlay {
background-color: green;
}
Try it in this jsFiddle
Inspect both elements with Web Developer Tool. Press F12 in IE8 then click on the cursor icon top left (or press Ctrl+B). Click on the radio button to inspect it.
It is recommended use Google Chrome's WDT, 'cause it can tell you more (eg. related CSS file) plus easier and faster to use. You can right click on the radio button and click 'Inspect Element' to see more (DOM, CSS).
I found the culprit:
<meta name="MSThemeCompatible" content="no">
This bit is in one page and not the other. So either I have to remove it in one page or add it to the other to make them look alike.
Styling of radio buttons is very limited, especially in older browsers. I wrote a tutorial about how to customize checkboxes and radios with CSS only, as well as create on/off switches via styling the label and using it's :before and :after pseudoclasses. It has an IE8 fallback. Maybe this helps :) Read it here: http://blog.felixhagspiel.de/index.php/posts/custom-inputs
Related
I just want to remove that blue underline from my donate button, its a Custom link i created after going to Appearance -> Menus -> Custom Link. The problem is this Custom link (donate button) is inheriting the same css from the navigation menu items, which i want to change. I have tried applying additional css,
.horizontal-navigation-bar nav ul li a:after {
margin-bottom: -1px;
}
but no success, any help shall be appreciated.
P.S. : - (I am working for the client, he has not given public access to the website, so sharing of url will be of no use), yes i am using UltraPress theme (https://justfreethemes.com/demo/?theme=UltraPress)
thanks
It seems it's just a matter of not targeting the right element, but since we can't see the code it's kind of hard to correct that.
Based on the template, this element, ul.navbar-nav>li.menu-item>a:after, controls the menu's underlines and the below css, when removed, removes the underline. So it should be something similar to this.
content: '';
display: block;
position: absolute;
bottom: -3px;
height: 2px;
Ideally, just inspect in your dev tools to find the exact element and style.
I have a paper-fab on my index page and it is displaying right until I tap on it. I say tap because this behavior only occours in mobile environment (in the chrome mobile view or on my Nexus 5).
This is the active button (on tap):
Note that the background is light gray. This square around the button is what I want to remove. The button is perfectly round. But this thing appears when tapped.
I tested other applications, like Topeka, and the active button (on tap) displays right:
But aparently there's nothing in special between my paper-fab and Topeka's one.
Here's the element declaration and the CSS:
<paper-fab icon="add" id="add-button"></paper-fab>
paper-fab#add-button {
position: relative;
background-color: #3F51B5;
display: block;
margin-bottom: 15px;
}
Is there something wrong?
Thank's in advance.
Your silver bullet is:
body {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
I suggest also that you attended to specify shim-shadowdom parameter for your style declaration:
<style shim-shadowdom>
BTW, you might want to compare your code against official paper-fab docs rathen than topeka.
Hope it helps.
I have a menu with a lava-lamp like underline that looks like this:
The underline slides between links when clicking on them. Try a jsfiddle HERE.
My only problem is that if you click outside the menu the underline reverts back to it's original state (18%). But I want the underline to stay on the last clicked link when you click outside the menu.
I've tried :visited but it doesn't do anything.
You can actually do this with pure css using The :target pseudo class.
Here is an updated working fiddle
Note: You'll need a modern browser to use this method. (IE9+)
Also, take a look at this article which shows some clever ways to simulate click events with css (one of them being the :target pseudo class.
You may be able to do this through CSS, I really don't know.
But why don't you just use these 3 lines of JS (jQuery) and replace the Style-definition by this:
$('.ph-line-nav').on('click', 'a', function() {
$('.ph-line-nav a').removeClass('active');
$(this).addClass('active');
});
nav a:nth-child(1).active ~ .effect {
left: 18%;
/* the middle of the first <a> */
}
nav a:nth-child(2).active ~ .effect {
left: 43.5%;
/* the middle of the second <a> */
}
Seen in this jsFiddle: Click me!
I am adapting a website in order to make it feel native on the iPad.
This website has navigation that shows a drop-down with the sub-navigation on hover.
This works like a charm on the iPad. When you touch it the subnav, it opens and closes again when you click/touch somewhere else.
Now i have the requirement to make it close again when the navigation point is touched again.
I was thinking, i could just set the pointer-events:none on hover & active for the iPad, but this makes the sub-navigation flicker and it does not work...
i have also tried to cover the navigation point with element set with the before selector and setting its pointer events to none, but this does not work...
Any idea, how i could solve this problem using CSS only. (I can not modify the HTML nor the JS)
PS: you can reproduce this on www.macprime.ch for example... (click the main navigation on the top, and try to close the dropdown again)
edit ok i tried almost everything that was possible with CSS only. I don't think its possible. If anyone can tell me why, he/she will get the bounty reward.
You could have a second transparent element that appears above the one you tapped. That way, when the user taps again, they will be selecting the other element and the first will lose its hover status:
<div class="blocker" onclick="void()"></div>
<div class="menuItem" onclick="void()"></div>
<style>
.blocker, .menuItem {
/* use the same position, width, height, etc */
}
.menuItem {
/* make it look pretty */
z-index: 100;
}
.blocker {
z-index: 99;
}
.menuItem:hover {
z-index: 98;
}
</style>
Of course, this will have a negative effect on the desktop, so you will want to do something like:
<style>
.blocker { display: none; }
.touchevents .blocker { display: block; }
</style>
<script>
if('ontouchstart' in document)
document.body.className += ' touchevents';
</script>
UPDATE Added onclick events to make them clickable.
You can see a working demo here: http://fiddle.jshell.net/vfkqS/6/
Unfortunately, I could not find a solution that does not require HTML or JavaScript changes, but I was able to keep them to a minimum.
You would need to make two non-CSS changes total:
Add a JavaScript mechanism for identifying if touch events are supported. See two line example above.
Add one div per menu which is clickable (onclick="void()") and has a unique identifier that can link it to the menu.
You may be able to do those two things with CSS but I'm not sure. Tablet detection would be a little sketchy in CSS and I don't think you can make something that sophisticated with a :before or :after pseudo-selector.
This is an interesting question and similar to one I've had come up recently. How do you marry a standard navigation dropdown that displays on hover with a touch event interface. Using the hover event as a trigger works really well on a desktop. In a world without hover events (tablets and smart phones), not so much.
In my case I landed on the idea of defining the behaviors: click/touch event would do the triggering, hover event would do subtle indications. For more details on this line of thinking see: http://www.markdotto.com/2012/02/27/bootstrap-explained-dropdowns/
For the issue you're trying to overcome I'm wondering if using #media queries in your CSS is a better solution...
#media (max-width: 979px) {
/*
New CSS declarations to show the sub navigation lists
in a more compact way that fits nicely on the iPad.
Something like...
*/
section.nav-overlay {
display: block;
height: 60px;
visibility: visible;
width: 979px; /* Or the max container width */
}
section.nav-overlay ul li {
float: left;
}
/*
Etc. etc. with the additional exceptions.
You get the idea.
*/
}
By doing this you would create more of a native interface on the iPad. However, if going this route is off the table, something like what Brian has above is better. Just wanted to give you an alternative.
Set pointer-events: none on the active state:
nav#mainnavi > ul > li > a:active {
pointer-events: none
}
I just noticed a strange behaviour in IE7.
I have radio buttons with associated labels as follows:
<input type="radio" name="filter" id="filter_1" value="Activities" checked="checked" />
<label for="filter_1">Activities</label>
<input type="radio" name="filter" id="filter_2" value="Services" />
<label for="filter_2">Services</label>
The radio button is hidden via css with display:none or visibility: hidden (don't ask)
The problem is - when I click the label in IE7 (haven't looked at other IE versions yet) the associated radio button is not actually checked. I confirmed this with jquery - the label click event is fired, but the radio button click event is not. A form post also confirms that the checked radio button does not change.
This works correctly in firefox, and also works correctly if I remove the CSS that hides the radio buttons.
Is this an IE bug or am I missing something?
It probably is to do with the display: none - you may also find that hidden elements don't get their values submitted with the rest of the form. If you have control over it, you may want to try positioning the elements off screen rather then hiding them.
This is a wiki answer to bring together all the different answers and options.
Option 1: Move the element off-screen as opposed to hiding it completely
position: absolute;
top: -50px;
left: -50px;
Option 2: Use a bit of JavaScript to set the radio button to checked when the label is clicked
$("label").click(function(e){
e.preventDefault();
$("#"+$(this).attr("for")).click().change();
});
Option 3: Set the element's width and/or opacity to zero
width: 0;
/* and/or */
-moz-opacity:0;
filter:alpha(opacity:0);
opacity:0;
outline:none; /* this prevents IE8 from having the line around it even though it's invisible */
Option 4: Use another browser :)
Basically, the spec for these things doesn't specifically state what behavior to use, but IE generally takes the stance that if it can't be seen, then it doesn't work. "Seen" and "work" can mean different things, but in this case it means that when display:none is set, the label doesn't activate the radio button, which leads to the usual workarounds necessary for so many things in IE.
This works for me
width: 0px;
Tested in IE7 and IE8.
Pure CSS no javascript.
This issue exists in IE6, 7, 8, and even the current 9 beta. As a fix, positioning the radio button offscreen is a good idea.
Here's an alternative that doesn't have to involve the designer or the css:
Hide the button normally, and make whatever function handles the click event for the button also handle the click event for the label.
$("label").click(function(e){
e.preventDefault();
$("#"+$(this).attr("for")).click().change();
});
Thanks Lane for this. I'm adding it as an answer here so people don't overlook your comment.
Replace
style="display:none;"
with
style="-moz-opacity:0;filter:alpha(opacity:0);opacity:0;"
You can try this for IE7,8:
input{
position: absolute;
z-index: -1;
}
instead of
input{
display: none;
}
There is some nice compilation of Your propositions:
input {
-moz-opacity:0;
filter:alpha(opacity:0);
opacity:0;
position: absolute;
}
instead of:
display: none;
I was using jQuery hide() function, so it wasn't easy to change the way an element is hide without writing a more complex code.
I found this idea:
I use class to store the checked attribute and set this attribute back again just before the submit.
if ($.browser.msie && $.browser.version == 7.0) {
$('input[type=radio]').click(function() {
$('input[name="'+$(this).attr("name")+'"]').each(function(){
if ($(this).attr("checked")){
$(this).addClass("checked");
}else{
$(this).removeClass("checked");
}
});
});
$('form').submit(function(){
$('input.checked').each(function(){
$(this).attr("checked","true");
});
});
}
It works like a charm in my case.