I built a little Chrome extension that has two buttons that change the content of the webpage depending on the button you click. However, Chrome is automatically focusing on the top button, and putting its blue highlighter around it. See the screenshot:
I assume that Chrome has some sort of default that automatically styles it, and it must focus on the top button. Is there anyway to have Chrome avoid highlighting buttons?
There's nothing to my HTML:
<div id="conservative">
<button id="conservatize">Conserve it!</button>
</div>
<div id="liberal">
<button id="liberalize">Liberate it!</button>
</div>
</body>
Try adding the following to your CSS:
*:focus {
outline:none;
}
I found the code in following thread: Chrome default focus outline.
Related
iOS9, Safari with VoiceOver enabled.
Not 100% reproducible but simply selecting an option will cause the VoiceOver focus to jump to the button at the top of the page.
Now can listen for the option being selected and then force focus on the element over a couple of seconds but that leads to undesired UX.
:focus {
background-color: pink;
}
<div>
<button tabindex="-1">close</button><br/><br/><br/><br/><br/><br/><br/><br/>
<select>
<option>Email</option>
<option>Tobias</option>
<option>Linus</option>
</select>
</div>
<p>This example shows how to fill a dropdown list</p>
In production code (which uses AngularJS) explicitly setting focus after a 2 second timeout fixed the problem but that's not ideal! Thanks.
Maybe it may come in handy this css property:
.button {
speak: spell-out;
}
Edit: this only works in firefox, see Mozilla docs
I am using twitter bootstrap in my .aspx page,
the btn-primary show text as blue instead of white.
<asp:LinkButton ID="btnConfirm" runat="server" Text="Confirm"
CausesValidation="true" ValidationGroup="req" CssClass="btn btn-primary"
OnClick="btnConfirm_Click"></asp:LinkButton>
but the btn-default looks as expected.
What is the problem?
any help will be appreciated.
Make sure to use latest version of Twitter Bootstrap.
Try change <asp:LinkButton...> to <asp:Button>, because <asp:LinkButton...> will render your control <a> tag, which 's css is defined by Bootstrap as
a
{
color: #337ab7; /* This is the color of your Confirm button */
...
}
You should try using Google Chrome inspect tool (or something like firebug extention on Firefox) and tracing the CSS rules that gives the text this blue color.
Here's some info on how to use inspect tool
It looks like your CSS is overwriting the text colour value with blue text.
Have a look at the page with the Developer tools and look at the CSS for the element. These things are usually easy to find and fix.
I would like to add a position effect on :active state on my bootstrap buttons. Unfortunately, the IE does not render the effect properly. Please use this site and compare the effect between Chrome/Firefox and IE 10/11:
http://jsfiddle.net/stebir/f0nw6kp2/2/
If I click on the button, I expect a smooth top transition (which works like a charm in Chrome and Firefox). But IE shifts the label "Button" slightly to right. It's a very subtle effect, but nevertheless it's annoying...
Do you have any idea to prevent this in IE?
Regards, Steven
[1]: http://jsfiddle.net/stebir/f0nw6kp2/2/
This is default functionality in IE... but there are a couple of ways around it.
Use an anchor instead of a button.
<a id="myBtn" class="btn btn-warning">Button</a>
Use a span with posistion: relative to keep the text in place.
<button type="button" id="myBtn" class="btn btn-warning"><span>Submit</span></button>
button > span { position:relative }
http://jsfiddle.net/pv01x0ud/
<input type="button" value="Button" />
IE indents the text down and over by 1px when the button is clicked by default. Is there any way to stop this with just CSS?
I'm also adding my own styles to this button, and everything is great until I click the text in the button... IE seems to ignore the :active state defined in my stylesheet. But if I click the button and not the text, IE performs the :active state. Of course the text moving issue is still present no matter what I do.
Any ideas?
If you use a styled A-tag you get around this whole "pressed" state issue completely. Using display:block and some CSS you can style the A-tag to look exactly like any button.
Okay, so, I had the same problem and I've discovered a solution that works for all browsers.
I had two form buttons that I changed borders, font family and sizes, and padding on. When I would click them in IE they would "jump" because IE is stupid in my opinion. All other browsers seemed to style the buttons correctly and not have a display issue with the buttons moving when the user clicked them..
The solution I found was:
Style the form buttons so that each of them have an equal margin and apply a wrapper division with a position or margin that will offset to your liking.
#myButton {
font-family: Times New Roman;
font-size: 16pt;
border: 2px solid #f7f6f4;
margin: 20px;
padding:15px;
}
<div style="float:right;margin-right:75px;">
<input type="submit" name="myButton" id="myButton" value="Don't Jump!" />
</div>
I don't know which version of IE you are using, but try Button background shift
Also, check out Remove 3D push effect on button, specifically the answer from allicarn, which changes the padding from the element on :active.
Just remember to put the css in IE specific cases, like an IF block.
I have an asp.net, mvc 3 app which shows a page with the following in it:
<input type="file" id="binary" name="binary"/>
On IE the "Browse..." text is getting highlighted, making the button look like rubbish:
When you don't highlight it, it looks like this
This only happens after a load or refresh of the page, and only if the Browse button is the first button I move the mouse over. I expanded the size of the button, and you can see the white highlight of the button.
This is very odd and only happens on ie. Any ideas?
From the screen shots I found that there might be background:white css you have applied.
If it is please remove it by,
input[type="file"]{
background: none;
}