In order to create a 508 compliant page I need to ensure that whenever I tab, the focus is visible on the correct item. I have set the tab index of my iframe and am attempting to show visual focus when it is tabbed to in internet explorer. I have tried the following:
iframe:focus {
outline:2px dotted #000;
outline-offset: -2px;
}
but I don't see an outline.
How can I show an outline on my iframe when it is tabbed to.
I think you need to apply your CSS to the body of the iframe's content, not the iframe, since its this content which actually gets focus.
https://bugzilla.mozilla.org/show_bug.cgi?id=112364
So if your iframe has a src of "test.html" then test.html would have a css class like this:
body {
outline:2px dotted #000;
outline-offset: -2px;
}
You might need to play with that a bit, but it demonstrates the misconception here.
Related
I am working on a web app which another developer has developed. Every time I run the project or refresh the page, an empty iframe covers the entire screen and other HTML elements are not shown in elements section of inspect. In order to interact with the app I have to delete it from inspect. I could not find the code snippet related to the iframe in the project. May anybody help me to solve this problem?
<iframe style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647;"></iframe>
Try adding this to your CSS:
iframe {
pointer-events: none;
}
The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible.
None prevents all click, state and cursor options on the specified HTML element
Or
iframe {
display: none;
}
I just have a simple button tag in HTML with a simple CSS Selector
and when I render the same 2 of my properties getting crossed out
there is no other selector applied on the button tag and I have also checked the parent tags no CSS selector is changing the color on parent tags as well. Could someone please help me if is there a way to identify why these 2 properties are getting crossed out?
.call-button {
width: 100%;
margin-top: 0.5rem;
height: 2rem;
background-color: orange;
color: #fff;
border: orange;
border-radius: 0.3rem;
}
<button class="call-button">My button</button>
There is a chrome page specifically for this here: https://developer.chrome.com/docs/devtools/css/overrides/
From the Elements panel, open the Computed pane.
Scroll through the list of properties and expand the one that you want to investigate further.
Click the blue link next to a declaration to jump to open the Sources panel and jump to that declaration's source code. See Make a minified file readable if the code is minified.
i suspect there's a problem with the way browsers are applying default styles onto things like <button> elements
to fully understand my conundrum, this involves the shadow dom, and i'll explain that at the end, however for now, let's just focus on a version of the problem i have isolated to a simple question about CSS:
how can i reset a <button> to it's original browser default styling?
i've tried setting properties like border: initial;, and border: unset; and border: inherit;, but in every case, setting any of these css properties on a button element causes the browser to release any of its default styling
please see the following example on codepen
<button>control</button>
<button id="b1">b1</button>
<button id="b2">b2</button>
<button id="b3">b3</button>
<button id="b4">b4</button>
<button id="b5">b5</button>
<button id="b6">b6</button>
<style>
#b1 { background: initial; }
#b2 { background: unset; }
#b3 { background: inherit; }
#b4 { border: initial; }
#b5 { border: unset; }
#b6 { border: inherit; }
</style>
in this example, the first button is a control, so we can see the default browser styling
on the buttons where we try to reset background, the button totally changes style, the background disappears, and even the border changes
on the buttons where we try to reset border, the button totally changes, but oddly in a different way -- here the border disappears, and the background changes
what explains these strange and unexpected results?
why do i need to reset a button, you ask? that seems like a weird thing to do, you think? consider my use case involving web component and the shadow dom:
i'm using the shadow dom with some web components
i want to allow users to OPTIONALLY set styles on some shadow <button>s
so i set button { border: var(--button-border); }
however even when the user doesn't supply --button-border, the button is visually manged and browser styles are not applied
even setting button { border: var(--button-border, initial); } and the other examples don't work
how can i give the users of my components a hook to style the buttons away from the default, however leaving intact the default buttons when they decide not to apply any button styles?
i feel like i'm stuck in a pickle here, and the browser might not have an answer to this problem — i fear that i'll have to either abandon the default styling for buttons within my components (bad practice, the default buttons are meant to be familiar to users), otherwise abandon any custom styling to the buttons (bad for designers that's for sure) — is there any hope to salvage this situation?
Try:
button {
background: none;
border: none;
padding: 0;
}
There is some weird white space showing up on the right side of my website in mobile. I was wondering if there is a CSS trick to add a border to all the html elements within the body of a webpage so that I can figure out which element is extending out and causing the white space on mobile.
Thank you
You can try this CSS snippet:
* { border: 1px solid black; }
Every element should now get a border. Beware, this means everything. Hopefuly it'll help you figure out that white space in your app!
Include that CSS snippet before your CSS files so that it can be overwritten - or after, to force it onto every element.
Try with
* {
outline: 1px solid red;
outline-offset: -1px;
}
* is a global selector, while outline will not mess with your elements positions, it'll just add a 1px red outline
Also make sure you use a CSS reset (usually body has by default 8px margin http://www.w3.org/TR/CSS21/sample.html)
You can resize your window, open the debug console and inspect the elements that might create the issue. Take a look at the Style panel and test-edit the styles until you get it fixed. in Chrome's Console you also have the Emulate option to test your page for different devices.
* {
border-style: 2px 3px solid dashed #3A5FCD;
}
On the following page, http://duncanmorley.com/ there are the following issues:
One cannot highlight text within the document
When a user hovers over an object with the ":hover" property applied,in the CSS file, the hover effect doesn't happen (See social icons at the top) (class="fb")
It seems that there is a transparent object over the page which is not allowing the user to interact with the elements. I'm unsure what this is, as there is nothing in the CSS file (that I can see) that suggests this is the issue.
I believe these issues are likely the result of one problem.
text-indent: -99999999px; causes the issue here because it will modify the area hover works, too.
Fix for the Facebook share button (an example)
Remove the text-indent style from the fb class and change <li class="fb">Facebook</li> to <li class="fb"><span class="hide">Facebook</span></li>
Now you can style the text the sr-only way:
.hide {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
At the end you should get the same effect, the "Facebook" text will be hidden for the visual presence and the hover effect will work on the entire element.
Oddly enough, your text-indent is too large. If you make it -9999999px instead, Chrome seems to like it better.