I have a button that turn blue when the user holds on to it for a while sample below on mobile. Sample below
This not an issue with ::selected or outline has i have added that and it didn't work.
The whole button turns blue for a few seconds and disappears. How do i stop the button from turning blue?
As I could infer from your problem statement, the background-color of your button might be changing due to :active pseudo-class acting on it which stays for few seconds of click on button and then when click is released it disappears. You may target the button:active selector and override the behavior with the desired background-color and color. I have tried creating a mock of what may help you.
button{
background-color: blue;
color: #ffffff;
height: 32px;
}
/* scenario you might need to override with the background color you want to retain */
button:active{
background: darkblue;
}
<button type="submit">Trial</button>
could you please post your code. Another way we cant help you. we dont know the problem. why button is looks like that. You are telling us about the problem but didn't show anything about problem
Related
I'm making an HTML5 game, and I have a reset button. whenever the button is clicked, it gets a black outline around the outside next time a button is pressed. is there an attribute or something I can use to prevent this?
<button id="reset" onclick="reset()">Reset</button>
This is what I'm using for my button. I don't know if it's something in the HTML or CSS. I tried going into CSS and adding user-select: none; but I think that's for radio buttons
button, button:hover, button:active, button:focus {
outline: 0;
}
It must be outline, set outline: none; it should solve your problem.
I guess I get what you're asking; probably duplicated at here
The following can work for your case:
<button class="btn" onclick="this.blur();">
Using the following style (remember that this style isn't recommended when we have accessibility in mind):
.btn:focus {
outline: none;
box-shadow: none;
}
See the answer at here; try to elaborate better your questions the next time, best regards; bye
I have an svg group and when I hover the mouse above it I want to show additional elements of the group. I have the code at a point where it does work in reverse (e.g. when I hover the mouse above the g the additional elements are hidden):
It works in reverse (JSfiddle)
But when I change it so that the button is initially hidden and then gets visible on hover it does not work anymore: How I actually want it.
I am sorry I couldn't use the built in stackoverflow code viewer, it somehow refused to work.
I think the problem is that the body tag surrounding the button stays at opacity: 0 even after the hove event is triggered. It is easy to observe in the browsers Inspector.
You have to set the opacity in the <button> element itself:
.html(`<button style="color: #000000; background-color: #FF8C00;
border: 1px solid #888888; opacity:0" class="connector-button">
<i class="fa fa-arrows-v" aria-hidden="true"></i></button>`);
Here is your updated fiddle: https://jsfiddle.net/7eoamnn4/
For my app, I use the Webix with the 'web' skin. I'm trying to customize the button's background when the button is:
hovered
clicked (when the mouse button still pressed)
just focused
I use the corresponding CSS-slectors:
.mouseover button:active {
background:#d7dff7;
border-color:#d7dff7;
}
.mouseover button:focus{
background:#e2d7f7;
border-color:#e2d7f7;
}
.mouseover button:hover{
background:#c2cae0;
border-color:#c2cae0;
}
The only thing I cannot reach is the active selector. In the below sample, try to click on any button and you'll see the default gray background:
http://webix.com/snippet/a5687eff
I thought it should be the class of the clicked button, but it's not working and I'm stuck with this. Any help is appreciated.
The css selector ".webixtype_base:active" has "background: #dedede!important;" in webix.css. That is why your background style for ".mouseover button:active" is being overridden.
You simply have to add "!important" so that your background style can take precedence.
See here: http://webix.com/snippet/1ee67de2
Trying to change the background color when the hyperlink is clicked, but since there is an onclick event it appears that the click default behaviour is taken away so the active style does nothing. Would prefer to do this using CSS.
CSS:
a.myanchor.sunsetred a:active {
background-color: yellow;
}
HTML:
<p>
<a onclick="displayText("Hello world") return false;" href="#" class="myanchor sunsetred">Click to display text</a>
</p>
Any ideas that could help?
I can not see any difference with or without the onclick parameter. (In Chrome) Just to make sure, you know the active state is applied during the click. As soon as you release the mouse button, the state is released. Maybe you mean :focus instead.
Either way, I believe you have a syntax error in your style declaration. You are coloring active links inside other links, which doesn't make sense. You probably mean:
a.myanchor.sunsetred:active {
background-color: yellow;
}
i have a button in asp.net like below :
<asp:Button ID="btnSaveInrpvEdit" CssClass="btnSaveInrpvEdit" runat="server"
Text="" ValidationGroup="B" onclick="btnSaveInrpvEdit_Click" />
and it's css :
.btnSaveInrpvEdit
{
background: url(/Images/Admin/btnSave.png) no-repeat left top;
width: 155px;
height: 63px;
border: 0px;
outline: none;
}
.btnSaveInrpvEdit:hover,.btnSaveInrpvEdit:active
{
background: url(/Images/Admin/btnSave_Hover.png) no-repeat left 1px;
cursor: pointer;
outline: none;
}
so every thing is ok about it's hovering...
at this time i want to implement this button behaviour about left mouse HOLDING and RELEASING on it!
if you attention to regular buttons in asp.net u will see when left mouse is clicked and holded on that button , so it seems it's text has been moved a bit...
also when we release left mouse, that button goes back to normal mode!
how can i do this job with css and javascript?
thanks in advance
First, note that the text moving (and if the text moves) in the pressed button has nothing to do with the <asp:Button (or the input element it renders) directly. The button styles and visual behaviour depend to a small part on the browser and to a large part on the windows version and theme the client uses. Manually moving the background image could look very weird on themes that don't actually move the text.
That said, you can emulate the behaviour relatively easy with JavaScript respectively jQuery in particular.
Something like this should work:
CSS (I used normal style here because pressing usually removes the hover style)
.btnSaveInrpvEdit.mousedown
{
background: url(/Images/Admin/btnSave.png) no-repeat 1px 1px;
}
JS + jQuery
$("#btnSaveInrpvEdit").mousedown(function () { $(this).addClass("mousedown"); });
$("#btnSaveInrpvEdit").mouseup(function () { $(this).removeClass("mousedown"); });
You probably also have to handle the user pressing the button but then holding and dragging the cursor away from the button, which causes the button to un-press visually but will also return to the pressed state if you move the mouse back over the button. This is a bit more tricky but I'm sure you got the gist of it and can work something out ;)
As a quick fix to at least prevent the button background staying offset forever you can add
$("#btnSaveInrpvEdit").mouseleave(function () { $(this).removeClass("mousedown"); });