I've got an input box when I apply border-radius to it there is a white space between the input-box and border.
Not sure why it is appearing. Please help
Note: i'm using bootstrap 3
.form-control {
padding: 0 8px;
line-height: 24px;
font-size: 12px;
font-weight: bold;
border: 2px solid #1d79d1;
color: #1d79d1;
min-width: 96px;
height: 32px;
border-radius: 32px;
background-color: #1d79d1;
}
<input class="form-control filter-button selectedBorder">
remove Borders as you're giving same colors to both border and
As your border color and background color are the same: Remove border and increase height or padding to compensate for height of border.
.form-control {
padding: 0 8px;
line-height: 24px;
font-size: 12px;
font-weight: bold;
color: #1d79d1;
min-width: 96px;
height: 34px;
border-radius: 32px;
background-color: #1d79d1;
}
I had similar issues. The input field and submit type can have rendering issues with border and border-radius feathering the border and background color.
You can us a box shadow to achieve the same effect.
.form-control {
padding: 0 8px;
line-height: 24px;
font-size: 12px;
font-weight: bold;
/* Change This */
/* border: 2px solid #1d79d1; */
border: none;
/* Add This */
box-shadow: 0 0 0 2px #1d79d1;
color: #1d79d1;
min-width: 96px;
height: 32px;
border-radius: 32px;
background-color: #1d79d1;
}
<input class="form-control filter-button selectedBorder">
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.
There's an element on my page that's visible in Chrome but disappears in Firefox even though it's using the tinymce library that clearly intended it to be visible.
The element is the button in:
<div class="mce-reset" role="application">
<div id="mceu_17-head" class="mce-window-head">
<div id="mceu_17-title" class="mce-title">Add Parshan Link</div>
<button class="mce-close" aria-hidden="true" type="button">×</button>
<div id="mceu_17-dragh" class="mce-dragh"></div>
</div>
...
and it doesn't help to remove the setting aria-hidden="true" (though I don't know why it's there). Some of the relevant CSS is:
.mce-window-head .mce-close {
position: absolute;
right: 15px;
top: 9px;
font-size: 20px;
font-weight: bold;
line-height: 20px;
color: #858585;
cursor: pointer;
height: 20px;
overflow: hidden;
}
.mce-window-head .mce-close {
position: absolute;
right: 15px;
top: 9px;
font-size: 20px;
font-weight: bold;
line-height: 20px;
color: #858585;
cursor: pointer;
height: 20px;
overflow: hidden;
}
.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {
margin: 0px;
padding: 0px;
border: 0px none;
outline: 0px none;
vertical-align: top;
background: none repeat scroll 0% 0% transparent;
text-decoration: none;
color: #333;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
text-shadow: none;
float: none;
position: static;
width: auto;
height: auto;
white-space: nowrap;
cursor: inherit;
line-height: normal;
font-weight: normal;
text-align: left;
box-sizing: content-box;
direction: ltr;
max-width: none;
}
.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {
margin: 0px;
padding: 0px;
border: 0px none;
outline: 0px none;
vertical-align: top;
background: none repeat scroll 0% 0% transparent;
text-decoration: none;
color: #333;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
text-shadow: none;
float: none;
position: static;
width: auto;
height: auto;
white-space: nowrap;
cursor: inherit;
line-height: normal;
font-weight: normal;
text-align: left;
box-sizing: content-box;
direction: ltr;
max-width: none;
}
button, input[type="submit"], input[type="button"] {
background: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6) no-repeat scroll 0 0 #fafafa;
border-color: #ccc #ccc #bbb;
border-radius: 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
color: #333;
cursor: pointer;
display: inline-block;
font-size: 13px;
line-height: 18px;
padding: 4px 10px;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}
I found that if I add
padding: inherit;
to the element's style, then the element is always visible, but with improper padding.
I also see that the CSS is getting loaded twice which is not proper, but might not be what's causing the problem.
Can anyone please tell me what's causing the element to become invisible (It's there and can be clicked on but I can't see it)? To see the problem, please go to the page, click on the words "agreeing with I.B.", then click on the "Parshan" button in the toolbar that appears above the text. There is a button at the top right corner of the dialog box which I can't see in Firefox (latest release: 37.0.2).
Also note: When I inspect the element via Firefox, the × often appears immediately.
I'm running on Windows 8.1 64 bit, but the problem is also sometimes seen on Windows 7.
Thanks a lot!!
In the end, the following LESS caused the X to appear and in the right place, though I guess that it's just a workaround, since I still don't know what's causing the problem:
.mce-window-head .mce-close {
padding: inherit;
box-shadow: none;
.mainContainer.ltr ~ div & {
top: 0px;
/* #noflip */ right: 0px;
}
.mainContainer.rtl ~ div & {
top: 0px;
/* #noflip */ left: 0px;
}
}
This question already has answers here:
Circle with two borders
(4 answers)
Closed 7 years ago.
I have a circle with one border, but I would like to know if there is anyway to achieve a circle with two borders of different colors. I have following CSS producing circle as follows:
.circle {
width: 20px;
height: 20px;
border-radius: 12px;
border: 1.5px solid #fff;
font-family: Cambria;
font-size: 11px;
color: white;
line-height: 20px;
text-align: center;
background: #3E78B2;
}
.circle:hover {
width: 27px;
height: 27px;
border-radius: 18px;
font-size: 12px;
color: white;
line-height: 27px;
text-align: center;
background: #3E78B2;
}
Here is link to jsFiddle
You could see currently it has some white border. I would like to add another border on top of white border.
Please let me know if you have any ideas/suggestions.
Hi u can make this also :
.container {
background-color: grey;
height: 200px;
padding:10px; // ADD THIS ALSO
}
.circle {
width: 20px;
height: 20px;
border-radius: 12px;
border: 1.5px solid #fff;
font-family: Cambria;
font-size: 11px;
color: white;
line-height: 20px;
text-align: center;
background: #3E78B2;
box-shadow: 0 0 0 3px #002525; // JUST ADD THIS LINE AND MODIFY YOUR COLOR
}
the advantage is that you can also put a blur effect, changing like this:
box-shadow: 0 0 3px 3px #002525;
If I understand you correctly, I think you're looking to do something along these lines: http://jsfiddle.net/QCVjr/1/
.circle {
width: 20px;
height: 20px;
border-radius: 12px;
border: 1.5px solid #000;
font-family: Cambria;
font-size: 11px;
color: white;
line-height: 20px;
text-align: center;
background: #fff;
position: relative;
z-index: 1;
}
.circle:before {
position: absolute;
right: 2px;
top: 2px;
left: 2px;
bottom: 2px;
content: '';
background: #3E78B2;
border-radius: 25px;
z-index: -1;
}
.circle:hover {
width: 27px;
height: 27px;
border-radius: 18px;
font-size: 12px;
color: white;
line-height: 27px;
text-align: center;
background: #fff;
}
You'll notice that I took your original background color and added it to the :before pseudo-element, moved the #fff to the background, and made your other border color (in this example, #000) the border color of the original element. Both z-indexes are required to get the right layering.
Can't figure out how I"m getting this extra white space around my image:
The markup:
<div id="member-name" hidden="true">
<button type="submit" id="btnExpandSection"><img src="~/Content/Images/plus.jpg" /></button><p id="member-fullName"></p>
</div>
the styles:
input, textarea
{
border: 1px solid #e2e2e2;
background: #fff;
color: #333;
font-size: .9em;
margin: 5px 0 6px 0;
padding: 5px 2px 5px 5px;
width: 300px;
}
img
{
display: block; /* gets rid off any unexpected margins round the image */
border: 0px;
}
input[type="submit"], input[type="button"], button
{
background-color: #ffffff;
cursor: pointer;
font-size: 11px;
font-weight: 600;
width: auto;
vertical-align: middle;
border: 0px;
}
td input[type="submit"], td input[type="button"], td button { font-size: 1em; }
UPDATE:
There's also this style in there:
#member-name
{
margin: 30px 0px 0px 0px;
height: 30px;
font-weight: bold;
color: white;
padding: 1px 1px 0px 1px;
background-color: #d28105;
border: 1px solid darkgray;
}
#member-fullName { margin: 0px 0px 0px 20px;}
#member-fullName p{ display: inline;float: left;overflow: hidden;}
Can't you just provide the image as a background to the button element?
#btnExpandSection {
background: #ffffff url('/Content/Images/plus.jpg') no-repeat center center;
height: /* image height */;
width: /* image width */;
}
I would start with this, and build it back from here...
button,
#member-fullName,
#member-name,
#btnExpandSection,
#btnExpandSection img {
margin: 0;
padding: 0;
}
But the following would definitely be preferably to an image nested between <button></button> tags. Replace 32px with actual width and height values of your image.
button {
background-image: url(~/Content/Images/plus.jpg);
width: 32px;
height: 32px;
}
Can't figure out how I"m getting this extra white space around my image:
The markup:
<div id="member-name" hidden="true">
<button type="submit" id="btnExpandSection"><img src="~/Content/Images/plus.jpg" /></button><p id="member-fullName"></p>
</div>
the styles:
input, textarea
{
border: 1px solid #e2e2e2;
background: #fff;
color: #333;
font-size: .9em;
margin: 5px 0 6px 0;
padding: 5px 2px 5px 5px;
width: 300px;
}
img
{
display: block; /* gets rid off any unexpected margins round the image */
border: 0px;
}
input[type="submit"], input[type="button"], button
{
background-color: #ffffff;
cursor: pointer;
font-size: 11px;
font-weight: 600;
width: auto;
vertical-align: middle;
border: 0px;
}
td input[type="submit"], td input[type="button"], td button { font-size: 1em; }
UPDATE:
There's also this style in there:
#member-name
{
margin: 30px 0px 0px 0px;
height: 30px;
font-weight: bold;
color: white;
padding: 1px 1px 0px 1px;
background-color: #d28105;
border: 1px solid darkgray;
}
#member-fullName { margin: 0px 0px 0px 20px;}
#member-fullName p{ display: inline;float: left;overflow: hidden;}
Can't you just provide the image as a background to the button element?
#btnExpandSection {
background: #ffffff url('/Content/Images/plus.jpg') no-repeat center center;
height: /* image height */;
width: /* image width */;
}
I would start with this, and build it back from here...
button,
#member-fullName,
#member-name,
#btnExpandSection,
#btnExpandSection img {
margin: 0;
padding: 0;
}
But the following would definitely be preferably to an image nested between <button></button> tags. Replace 32px with actual width and height values of your image.
button {
background-image: url(~/Content/Images/plus.jpg);
width: 32px;
height: 32px;
}