Should be fairly simple but I'm lost and all searches result in non-specific answers that don't directly relate to my issue.
Button, border is black but apparently, the "depressed" feel is achieved by changing the border color to black so when I do click the button, it feels "dead". Nothing happens, so it's hard to tell if you miss-clicked or what.
How do you change the "onclick" border color? That way, it can get that "depressed" look again.
.addButton {
border-color:black;
border-width:1px;
background-color:#00B0F0;
text-decoration:underline;
}
The best solution is to use css, try the following code:
.addButton:active,
.addButton:focus
{
border:0.5em solid #00c; /* here configure as your needs */
color:#00c;
}
Hope that helps!
Related
I have some hyperlinked text.
However, if I click it (but don't let go of the mouse or pull the mouse away) it disappears. Almost as if there is something other than a:link & a:visited that needs to be styled and the text is turning white (I have a white background).
Does anybody know which tag I need to style to change the colour of the state of the class when the mouse is held on the link? I've tried every <a> tag I can find and nothing is preventing the change of colour. I'm baffled as I've never come across this before.
Thanks in advance.
hope it helps
a:active{
color:#000000 !important; /*or set the color of your choice*/
}
You can try this hope this will help you.
.a:hover,.a:active {
color:black;
}
So, whenever I click on my button, this happens:
Is there any way to prevent this?
Thanks guys. :)
Answered already (probably many times, but here's one example): https://stackoverflow.com/a/3397158/839847
Quoted here for convenience:
This border is used to show that the element is focused (i.e. you can
type in the input or press the button with Enter). You can remove it,
though:
textarea:focus, input:focus{
outline: 0;
}
You may want to add some other way for users to know what element has
keyboard focus though for usability.
Chrome will also apply highlighting to other elements such as DIV's
used as modals. To prevent the highlight on those and all other
elements as well, you can do:
*:focus {
outline: 0;
}
Think you keeping your button inside <a> tag. If so use this code
a #btnid
{
border:none;
}
panelMain.setBackground(Color.WHITE);
Button.setBackground(Color.WHITE);
Adding this to your JFrame inherited class constructor will resolve the issue. The color does not have to be white, you can set it anything, just make sure the panel and button are of the same color. and please don't trust my answer too much because I too am a beginner
To make this work for me in Chrome in 2021 I added this to my Site.css file:
.btn,
.btn:focus,
.btn:active,
.btn:hover {
border: 0 !important;
outline: 0 !important;
}
I recently modified a bit of a button to give it a 3d effect in a bootstrap site.
The result satisfied me, but when I applied the style to tag <button> instead of <a> I had several problems.
You can find the code in question here: http://jsfiddle.net/wctGM/3/
I hope someone can help me, because I can not in any way to move forward
You must use border: none:
button {
border: none;
margin-top : 50px;
}
Your code:
http://jsfiddle.net/wctGM/7/
There are some things which are different to each other. For an instance if you set the border:none; property for a button you will get rid of that border. But the width and height remains different. What I mean to say is go through the default properties which are set on each html tag and try to understand them and then try to change.
See this link. I have added border property like below.
button {
margin-top : 50px;
border:none;
}
Here is the drop down menu I am working on.
<select id="frames" onchange="updateDisplay()" class="styled-select">
<OPTION value="ravi">ravi</OPTION>
<OPTION value="steve">steve</OPTION>
<OPTION value="robert">robert</OPTION>
</select>
and the css
select {
background-color:#232323;
border-color:#232323;
border-width:1px;
color:white;
};
http://jsfiddle.net/ravi007/ZWwgW/3/
I am trying to add a grey back ground to drop down menu. I am partly successful.
I failed to add grey color to small button with arrow. I also want to make that arrow to white.
I am seeing a default yellow border around drop down when I click. Is there a way to make it blue
When googled I noticed that button part is related to browser.
Thanks
You can't change the arrow but you can make it look like its changed with an Image.
Here is a simple trick, Have a look at this Example
Not Exactly what you want, but helpful.
You have to add the background to the LI elements as well. This is only an issue in certain browsers IIRC.
select, select > option {
background-color:#232323;
border-color:#232323;
border-width:1px;
color:white;
}
Demo
As for the 'border' colour - are you sure this is not the 'outline'?? have you tried changing outline-color: blue; ? Demo with outline.
Here is the difference with the LI's getting the background color in Chrome on Linux (Ubuntu) http://jsfiddle.net/rlemon/ZWwgW/7/
Sadly,
you won't be able to change that arrow with CSS, because it is rendered by the browser you are using.
The only thing I can think of is to use this JQuery Library (example)
And for the border I think you will be able to access it like this (this border is only rendered by some browsers like safari):
select::-moz-focus-inner {
border-color: blue;
}
and if you are talking about the outline, you can simply do:
select{
outline-color: blue;
}
In css, I want to have a 2 pixel light blue border when a given textbox is in focus. I have the following:
form input.text:focus
{
border:2px solid #09F;
}
Pretty simple. The problem is, the default orange border can still be seen outside of my new blue one. How can I get rid of this?
I'm not sure it pertains to the outline property as it's usually blue, not orange (which browser are you on?). Anyway, try simply adding outline: none; to that ruleset.