I am trying to add a CSS button to my code, but the background colour of the button is not changing.
Here is my CSS code for the button:
.button {
background-color: red;
border: solid;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline;
font-size: 16px;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
}
Here is the HTML code I currently have:
<div>
Click here
</div>
The background of the button remains the standard white colour no matter what I set the background-color to. This is the current button, but I would like to change the background.
This is exactly your code. How you can see it works.
I think in your project is another CSS which overwrites your background-color.
You can use the developer tools (F12) to check which part of your CSS is responsible for the background-color.
chrome dev tools (inspecting html)
chrome dev tools (inspecting css)
.button {
background-color: red;
border: solid;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline;
font-size: 16px;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
}
<div>
Click here
</div>
Override other css:
.button{
background: red! important
}
Either your CSS is being overridden by another class that you haven't showed us or your browser is caching the incorrect result. If you are using Chrome:
Right click your page and click "Inspect"
In Inspector there should be a "Network" tab listed. Click it.
Inside of that tab, there should be a checkbox for "Disable Cache". Check it
Refresh your page with this option checked.
If that doesn't work then it is likely being overridden somewhere.
Yes. There's nothing wrong with the code. Maybe you shouldn't have rendered your css properly or used the same class name for lot of elements. I've also tried it with your code. It's good.
.button {
background-color: blue;
border: 2px solid red;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline;
font-size: 16px;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
}
<div>
Click here
</div>
Related
I'm having trouble with fixing my button in CSS. I have my button styled correctly, but for some reason the background behind the button itself is white still.
The code for my button & links, as I think it may be an issue with my links as well.
HTML:
<button class="s1btn">
<a href="#" target="_blank" tabindex="1">GitHub
</a></button></div>
CSS for button:
.s1btn a {
text-decoration: none;
color: white;
background-color: #f36dcb;
border: black 1px solid;
border-radius: 3px;
text-align: center;
padding-top: 3px;
padding-left: 3px;
padding-right: 3px;
}`
.s1btn a:hover {
background: #844421;
}
.s1btn a:active {
background: #b36b43;
padding-top: 3px;
}
CSS for all links:
links {
font-size: medium;
margin-left: auto;
padding-right: 50px;
color: #844421;
font-weight: 500;
}
.hLink {
margin-right: 30px;
}
`
Screenshot of button:
Broken Button
I tried to comment out different sections of my button but that didn't help me target the problem to resolve the issue. I also tried to inspect the website itself, to figure out what was causing the background of my button to remain white.
Browsers have default styles for buttons, a tags, etc. Your css is only selecting the <a> tag in the <button> tag, so no styles are being applied to the <button> itself. You can reset the styles of the button with this:
button {
background: transparent;
border: none;
margin: 0;
padding: 0;
}
You can see more on resetting the button styles here: https://css-tricks.com/overriding-default-button-styles/
As shown in the picture I applied a border radius for the select tag but when pressing on it the arrow button isn't taking the border radius.
(Only in Opera browser)
css:
.App select{
font-family: "Nunito", sans-serif !important;
font-size: 22px !important;
padding: 0.25rem;
border-radius: 0.5rem;
border: #dc3545 solid 1px;
outline: none;
padding-left: 15px;
}
Is there any solution for this?
The outline shown is most likely the :focus state. I would keep this on for accessibility reasons; some people physically cannot use a mouse, or simply prefer to navigate a page via the keyboard.
Knowing this, you can toggle the focus state with CSS:
:focus {
outline: none;
}
The Solution is simple, just give in:
.App select:focus {
overflow: inline;
outline: none;
I have a child component which has several tabs with the following CSS property:
a {
padding: 7px 14px;
display: inline-block;
text-align: center;
text-decoration: none;
cursor: pointer;
&:hover,
&:focus {
background-color: pink;
border-bottom: 2px solid red;
}
}
When I click on back button it goes back to the previous selected tab which is fine but the focus is not removed from the current one unless I click on any other part of the screen.
How to remove the focus?
I think, I have a different solution for that you can set your on navigate back using
document and id. Here is a sample code below=>
HTML:
<input id="abc">
<button (click)="mySetDefaultFocus()">Set Focus</button>
TS:
mySetDefaultFocus(){
document.getElementById(`abc`).focus();
}
Note: You can call that method mySetDefaultFocus on navigate change or ngInit.
all. I've spent a few hours on what should be very simple before figuring out that chrome was my problem. Essentially, I'm trying to format a link of type "submit" such that it no longer looks like a button. My CSS is:
a[type="submit"]:link,
a[type="submit"]:focus,
a[type="submit"]:visited,
a[type="submit"]:active {
background: #fff;
border: 0 !important;
cursor: pointer;
outline: none!important;
display: block;
padding: 0;
margin: 0 auto;
text-decoration: none;
width: 100%;
height: 100%;
}
Text
Weirdly, it looks fine in this code snippet. However, when I run this in my project, chrome does not remove the border around the link that appears when I set the type to "submit". It does successfully change the background color to white. Things look fine when opened in firefox. Is there any way to get around this in chrome?
You seem to be getting confused between an anchor and a button
:visited and :link are CSS pseudo-classes usually used for styling an anchor element.
type="submit" is for a button element. And while type can be set on an anchor element, it will only...
specify the media type in the form of a MIME type for the linked URL. It is purely advisory, with no built-in functionality.
button[type="submit"],
button[type="submit"]:focus,
button[type="submit"]:active {
background: #fff;
border: 0 !important;
cursor: pointer;
outline: none!important;
display: block;
padding: 0;
margin: 0 auto;
text-decoration: none;
width: 100%;
height: 100%;
}
<button name="set" type="submit" value="set">Text</button>
I have a page at http://www.problemio.com/problems/problem.php,
and you see on the bottom-right I have a teal image. It is really a link and in that link I can't seem to get the text color to appear white.
Here is my CSS:
.button
{
display: block;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
text-color: white;
font-weight: bold;
text-decoration: none;
}
a:button.visited
{
display: block;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
text-color: white;
font-weight: bold;
text-decoration: none;
}
and here is how I make the link with HTML:
<a class="button" id="follow_problem" href="#" title="...">Follow Problem</a>
Any idea what is going wrong and why the color of the link isn't white?
It appears that you're trying to override the styling of the a:link class Try:
Option 1:
Here is the class you're trying to override:
a:link {
color: #3686A7;
text-decoration: none;
}
You need to add !important to the end of your style declaration:
.button {
color: white !important;
}
Option 2:
You could further define the a:link class rules:
a:link.button {
color: white;
}
That's because a:link (line 95) is more specific than .button (line 109).
You can fix it by changing the rule to
.button,
a:link.button {
/* rules */
}
Tips:
While using !important will work, it is a silly workaround that will eventually get you in trouble, and it is actually a misuse - http://www.w3.org/TR/CSS2/cascade.html#important-rules
Use Firebug for Firefox, or Chrome's inspect element, to check the css affecting a given element.
In your .button class, use this: color: white !important;. The problem happens because the a style declaration is applied after the .button declaration, in effect cancelling the color you have set in favor of the link 's color property. Using !important ensures the color rule is applied over any other.
That's because you have another class in common_elements.css that has higher priority than .button
a:link
{
color: #3686A7;
text-decoration: none;
}
Try making your .button more prioritized by !important