I want to add the border to my button in the webpage, following is what I do.
The strange things it that the color set works, which can control the font color within the button, but the sets for the border does not work.
I have tried some solutions with highest votes, but none of them works.
.btn-general {
color: #fff;
border-color: #fff;
border-style: solid;
border-width: 2px;
border-radius: 10px;
padding: 12px 26px 12px 26px;
font-size: 16px;
font-weight: 400;
}
I tried you code, and it seems to be working fine. Are you using bootstrap or something like that? Because if you are, it can be that Bootstrap is overwriting your CSS. You can try putting !important behind your css lines to see if it works.
<style>
.btn-general {
color: #fff !important;
border-color: #fff !important;
border-style: solid !important;
border-width: 2px !important;
border-radius: 10px !important;
padding: 12px 26px 12px 26px !important;
font-size: 16px !important;
font-weight: 400 !important;
}
</style>
<button class="btn-general">
Test
</button>
Related
for some reason a border around this button isn't appearing, can anyone take a look at the code and find out why?
Here is my code for the 'CLEAR' button:
.reset {
background-color: #0B0B45;
color: #11FFEE;
margin: 30px;
width: 120px;
height: 35px;
box-shadow: 0px 3.7px 2px #278ea5;
border: 10px;
border-color: #11FFEE;
`enter code here` font-size: large;
font-weight: 800;
The other buttons have this CSS:
.button {
justify-content: center;
margin: 30px;
width: 120px;
height: 35px;
font-size: large;
background-color: #11FFEE;
border: none;
font-weight: 800;
color: #0B0B45;
box-shadow: 0px 3.7px 2px #278ea5;
border-radius: 2px;
border is a shorthand property for border-width, border-style, and border-color. In order to make it work correctly you may change the border to border-width or set all properties of border using a shorthand.
More information about borders: https://developer.mozilla.org/en-US/docs/Web/CSS/border
Example solution:
.reset {
background-color: #0B0B45;
color: #11FFEE;
margin: 30px;
width: 120px;
height: 35px;
box-shadow: 0px 3.7px 2px #278ea5;
border-width: 10px;
border-color: #11FFEE;
font-size: large;
font-weight: 800;
}
You're not seeing your border because you did not specify a border-style property. It is important to always specify border-style otherwise nothing will be displayed. Try "border-style: solid;" for example.
I have a weird case where the caret for the twitter bootstrap select is not appearing after some customisation. I am therefore looking to restore the style for the select. These are the current styles:
#sidebar2 select {
max-width: 100%;
margin: 0px;
border: 1px solid #ccc !important;
outline: 0;
display:block;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075) !important;
border-radius: 2px !important;
width: 100% !important;
height: 32px !important;
font-weight: 500;
-webkit-appearance: none !important;
-webkit-transition: none !important;
text-transform: none;
font: inherit;
vertical-align: top;
}
Because you use -webkit-appearance: none !important, it will make the caret disappear, you can try on mozzila and see the caret still there
I am trying to do some up and down arrows, which depend on stock price changes (https://jsfiddle.net/ec0x7pru/6/), they seem to be cut out due to the parent container css definition, what would be modified CSS for the triangle-up and triangle-down classes to prevent that.
.triangle-up {
display: inline-block;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid green;
bottom: 1em;
}
.triangle-down {
display: inline-block;
bottom: 1em;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 8px solid red;
}
On another note, using FF developer edition, these seem to be shaking slightly? any suggestion to fix that.
Remove padding-right:
https://jsfiddle.net/ec0x7pru/7/
And try to use this:
border-style: inset
This is a CSS-only alternative to my other answer:
.container span {
padding-right: 0.3125rem;
font-family: "NHaasGroteskDSPro-75Bd", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.125rem;
}
.triangle-up {
display: inline-block;
border-style: solid;
border-width: 0 7px 14px 7px;
border-color: transparent transparent green transparent;
bottom: 1em;
padding-right:0px !important;
}
.triangle-down {
display: inline-block;
bottom: 1em;
border-style: solid;
border-width: 14px 7px 0 7px;
border-color: red transparent transparent transparent;
padding-right: 0px !important;
}
Due to that padding, there was a plateau on the top. I've tweaked borders and overridden that.
https://jsfiddle.net/ec0x7pru/19/
Use a character instead:
<div class="container">
<span>DAX</span>
<span>3000</span>
<span id="up">▲</span><span>50.6</span>
<span>CAC 40</span>
<span>4536</span>
<span id="down">▼</span><span>-23.2</span>
</div>
https://jsfiddle.net/ec0x7pru/13/
I have several QPushButtons that are located beside each other. Each button has a padding of 8px on the left and the right side. When one of them has focus I change the background-color. So far it looks fine:
In addition to the background-color change I want to apply a border of 2px in white. When I do that the text seems to be cut off by the size of my border. So with a border of 2px it looks like this:
When I increase the border-size to, for example, 4px my text vanishes completely because the button does not increase it's size correctly.
I use the following CSS in Qt:
QPushButton {
background-color: transparent;
border-style: none;
font: bold 12px;
color: white;
padding-left: 8px;
padding-right: 8px;
}
QPushButton:focus {
background-color: blue;
border-style: solid;
border-width: 2px;
border-color: white;
}
Edit, Solution from Rushi:
The idea is to define the border for the original (non-focused) button with a transparent color. When it receives focus the width of the button seems to be computed correctly. I don't know why Qt computes it correctly in this case, but it works for me :-)
CSS with the fix:
QPushButton {
background-color: transparent;
/* we define our border here but with transparent color */
border-style: solid;
border-width: 2px;
border-color: transparent;
font: bold 12px;
color: white;
padding-left: 8px;
padding-right: 8px;
}
QPushButton:focus {
background-color: blue;
border-color: white;
}
Hello Please check below html and css code ,it will be help you to solved this issue.
<html>
<head>
<title>title</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box{ background: #000; width: 400px; height: 100px; margin: 50px; padding: 50px;}
.QPushButton {
background-color: transparent;
font: bold 12px;
color: white;
padding-left: 8px;
padding-right: 8px;
border-style: solid;
border-width: 2px;
border-color: transparent;
}
.QPushButton:focus {
background-color: blue;
border-style: solid;
border-width: 2px;
border-color: white;
}
</style>
</head>
<body>
<div class="box">
3
4
</div>
</body>
</html>
You should decrease size of padding. Here is the trick:
QPushButton:focus {
....other styles.....
border-width: 2px;
padding-left: 6px;
padding-right: 6px;
}
I prefer #Evgeny's answer as sometimes you would want border on default state, so setting it to transparent won't help.
A working example:
/* default state */
QPushButton {
border: 1px solid black;
padding: 1px;
}
QPushButton:hover {
border: 2px solid black;
padding: 0px;
}
Edit:
I solved this problem thanks to Emily and Mike below. They told me how to find out where the CSS was coming from using Firebug.
For my site, I had a link black-colored with no underline, then with an underline when hovered. I turned this link into an Amazon "Quick Linker" link, and then it turned blue with an underline.
Someone on Stack Overflow told me to add !important to the CSS, but that didn't change the link format.
Any idea how I could turn this link to black-colored with no underline and still keep it an Amazon "Quick Linker" link?
Here is the code for the link:
'<a type="amzn" category="books" class="links2">'.$row['site'].'</a>'
Here is the CSS for the link:
a.links2:link {
color: #000 !important;
text-decoration: none !important;
text-align: left !important;
margin-top: 6px !important;
margin-bottom: 2px !important;
margin-left: 2px !important;
padding: 0px !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 12px !important;
height: 12px !important;
vertical-align:middle !important;
}
a.links2:visited {
color: #000 !important;
text-decoration: none !important;
text-align: left !important;
margin-top: 6px !important;
margin-bottom: 2px !important;
margin-left: 2px !important;
padding: 0px !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 12px !important;
height: 12px !important;
vertical-align:middle !important;
}
a.links2:hover {
color: #000 !important;
text-decoration: underline !important;
text-align: left !important;
margin-top: 6px !important;
margin-bottom: 2px !important;
margin-left: 2px !important;
padding: 0px !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 12px !important;
height: 12px !important;
vertical-align: middle !important;
}
a.links2:active {
color: #000 !important;
text-align: left !important;
margin-top: 6px !important;
margin-bottom: 2px !important;
margin-left: 2px !important;
padding: 0px !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 12px !important;
height: 12px !important;
vertical-align: middle !important;
}
Is it possible that CSS is declared before the Amazon "Quick Linker"'s styles? The quick linker script could also be setting the !important declaration, which would take precedence over your own declaration. You would need to make sure your styles are set after the styles set by Amazon's script.