This question already has answers here:
Outline radius?
(24 answers)
Closed 7 years ago.
My code so far allows me to click on a button with rounded edges as I have applied the border-radius feature. However, when I click on the button the borer is still squared and so looks horribly out of sync.
Can be seen here:
http://www.tiikoni.com/tis/view/image.php?id=23d3264
this is the css for the button:
.submitToDoButton {
background: lightgray;
font-size: 20px;
color: red;
padding: 2px;
width: 100px;
border-radius: 25px;
}
this is what I thought would be the code to change the border aka set it to the same radius:
.submitToDoButton:active{
border-radius: 25px;
}
but this does nothing
You could try outline: none; to the main button class:
.submitToDoButton{
border-radius: 25px;
outline: none; /* add this */
}
If you do want an effect similar to outline but to look good, you can use the box-shadow property.
You won't be able to solve this with border-radius and outline. To get the result you are looking for you need to make a box-shadow looking the same as the outline on :focus.
.submitToDobutton:focus {
box-shadow: 0 0 5px blue;
}
I am not sure about the outline color, but you'll probably have to change 'blue' to the correct color.
Related
This question already has answers here:
How to remove the border highlight on an input text element
(21 answers)
Remove or disable focus border of browser via javascript
(9 answers)
Closed 2 years ago.
I have an input section for text and I would like the border-radius of that input to be 50px.
However, when I have the border-radius, the original border is still visible when that field is selected.
I have added a picture below where you can clearly see what I'm referring to. The light border with radius is what I want, but I am also getting another rectangular border.
Here's the CSS I currently have:
.searchbox {
width: 560px;
height: 39px;
border-color: #dedede;
border-style: solid;
border-radius: 50px;
}
HTML for this is basic input:
<input type="text" name="q" class="searchbox">
You should add
.searchbox:focus {
outline: none;
}
.searchbox {
width: 560px;
height: 39px;
border-color: #dedede;
border-style: solid;
border-radius: 50px;
}
.searchbox:focus {
outline: none;
}
<input type="text" name="q" class="searchbox">
Reference
:focus
You can add outline: none; to the :focus styles.
Never do this!
Some people navigate webpages with the tab key on their keyboard because they can't use a mouse. The outlines around elements help them see what they are focusing on. You are basically confusing them if you do this.
So you should definitely do something else on focus, such as change the background.
Just add
.searchbox:focus {
outline: 0;
}
to your CSS
This question already has answers here:
bootstrap button shows blue outline when clicked
(36 answers)
Closed 5 years ago.
I'm having a problem with styling Bootstrap buttons when I want to change/remove blue frame around them after they've been clicked. Here's the case:
I've already seen many posts regarding this issue, and almost every one of them concludes with "use outline:none". For some reason, this isn't working for me. CSS code:
.btn {
color: white;
border-radius: 0px;
background-color:rgba(124, 122, 119, 0.405);
border-color: rgba(255, 165, 0, 0.405);
margin: 15px;
max-width: 30%;
max-height: 30%;
outline: 0;
}
.btn:hover{
border-color: white;
background-color: rgba(190, 123, 34, 0.514);
outline: 0;
}
.btn:focus{
border-color: white;
background-color: rgba(255, 166, 0, 0.418);
outline: none;
border: 0;
}
.btn:active {
border: 0;
outline: 0;
}
As you can see, I've blindlessly put the outline property everywhere, mixing it's every possibility with trial and error method. Still nothing.
Here's my HTML code for this button if you find it useful:
<button type="button" class="btn btn-primary" (click)="decrementStep()">Back</button>
Also, would be nice if you could tell me how to change button's background color when its being clicked, for some reason it doesn't work for me either. I think the problem's reason lies somewhere within Bootstrap, but I'm totally new to frontend and just a beginner with it. Also, if it matters, I'm using Angular. Thanks in advance.
Your blue border is cause by the btn-primary class. You need to override the border colour and box shadow to remove it (also removed the outline just in case):
.btn.btn-primary {
border-color:transparent !important;
box-shadow:none !important;
outline:none !important;
}
Example bootply
To switch it off you need the following css rule:
.btn:focus {
box-shadow: none;
}
Because it's not an "outline" that's being used for that blue frame but box-shadow instead.
You could try to make a reset to the Input...
Some HTML elements have their own properties set by default and is different for each browser.
This is some information about the "reset" process:
Reset Forms
I have a form with a lot of color inputs. I am using boostrap and the default look for a color input is horrible so I have been adding my own CSS on top of it to clean it up. I have gotten rid of the big white border but now I would like to have it display as a circle instead of a square. I would like it to be a flat circle with no border and maybe even with a slight shadow for a material design-esque look.
This is one of my color inputs:
<div class="col-xs-1 menu-title-color-div color-input-div">
<input type="color" id="menu-title-color-input"
class="form-control menu-data color-input menu-title-color-input"
name="MenuTitleColor">
</div>
and the CSS I am using to gain the look. (When I figure out how to display them as a circle I am going to move this CSS to a more specific css selector)
.form-control {
color: #ffffff;
background-color: inherit;
padding: 0;
border: none;
box-shadow: none;
}
Here is what it looks like so far. There also still seems to be a thin, gray border around the inputs but I can't figure out how to get rid of that either.
github
I hope I am understanding you correctly - you want those three buttons to be circles instead of squares? Or do you want the whole div to be a square?
Either way, this is one option of doing it by manipulating the radius and setting a width and height:
.form-control {
color: #ffffff;
background-color: inherit;
padding: 0;
border: none;
box-shadow: none;
width: 100%;
height:100%;
border-radius: 50%;
}
I'm trying to create a fancy button hover state for the default button in Bootstrap 3. Basically, the button starts out with 4px of border-bottom and when hovered this reduces to 2px. Because of this, I compensate with top: 2px on the button.
This works fine, however it's affecting other elements which I don't want it to do. For example, it pulls the paragraph beneath it up. Here's a JSFiddle example:
http://jsfiddle.net/kD6dQ/
You can see when you hover over the button the paragraph below changes position. How do I stop that?
I've tested this in the latest versions of Chrome and Firefox.
You used top for your element. When changed to margin-top it works.
fiddle
css:
.btn-default:hover {
background: #eba22b;
color: white;
border-bottom: 2px solid #db9016;
margin-top: 2px;
}
Try this for the hover declaration:
.btn-default:hover {
background: #eba22b;
color: white;
border-bottom: 2px solid #db9016;
top: 2px;
margin-bottom: 2px;
}
Check this fiddle: http://jsfiddle.net/kD6dQ/1/
The best way to solve this is to simply add height to .btn-default
E.G: height: 35px;
DEMO HERE
I am trying to create a button with 3 layers of border around it with the middle layer showing the background of the containing div. Examples are worth a thousand words so here you go
http://jsfiddle.net/e5Sxt/2/
html
<div id="content">
<p>Generic Content</p>
<button class="button">Search</button>
</div>
css
#content{
width: 500px;
height: 500px;
background-color: black;
padding: 50px;
color: white;
}
button{
margin-top: 50px;
padding: 20px;
text-align: center;
background-color: #333;
box-shadow: 0 0 0 5px #666, 0 0 0 10px red, 0 0 0 15px #bbb;
border: none;
cursor: pointer;
}
The red box-shadow is where the black of the containing div should come through. If the box-shadow is set to transparent for this layer, the box-shadow under it shows through instead.
I have tried utilizing outlines, borders, and box-shadows to no avail so far. As of right now, I think I will have to wrap the button in another div with the outer border and a padding to show the background, but wanted to see if anyone could do this without adding another html element.
Thanks!
The answer depends on what browsers you need to support (and whether you'd be happy with a fall-back solution for older browsers).
There is a CSS feature called border-image, which, frankly, can do pretty much anything you could think of for a border. You could achieve this effect very easily using this style.
With border-image, you could simply specify a small image with your two colours and transparent middle section. Job done.
Learn more about border image here: http://css-tricks.com/understanding-border-image/
However... there is a big down-side: browser support. border-image is a relatively new addition to the CSS spec. Firefox and Chrome users should be okay, but IE users miss out -- this feature didn't even make it into IE10.
Full browser support details can be found here: http://caniuse.com/#search=border-image
If poor browser support for border-image is enough to kill that idea for you, then another viable answer would be to use :before or :after CSS selectors to create an pseudo-element sitting behind the main element. This would have a transparent background and be sized slightly larger than the main element and with it's own border. This will give the appearance of the triple border you're looking for.
Of course, you can only use this solution if you aren't already using :before and :after for something else.
Hope that gives you some ideas.
I think the only way to do this is by using a wrapper unfortunately. I'm not sure if it is possible to get the transparency through the button background.
Although, if you know the background color, you can use that in the border obviously, but of course this won't work for background gradients.
Here is a proposed jsFiddle showing knowing the color, and another using a wrapper:
http://jsfiddle.net/eD6xy/
HTML:
<div class="box one-div">(1 div, know color)</div>
<div class="two-div">
<div class="box">(2 divs, pure transparent)</div>
</div>
CSS:
/*
With one div, works fine with a constant color (#abc)
But with gradient, probably won't match up correctly
*/
.one-div {
margin: 15px 10px;
border: 5px solid blue;
box-shadow: 0 0 0 5px #abc,
0 0 0 10px red;
}
.two-div {
margin-top: 30px;
padding: 5px;
border: 5px solid red;
}
.two-div > .box {
border: 5px solid blue;
}