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
Related
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%;
}
This question already has answers here:
Remove only one border on input element and not effect the other borders
(2 answers)
Closed 7 years ago.
I want to merge two textboxes and bring them in line so that they look one. Purpose is to keep the left box disabled with a constant content and the right box editable.
This is my css:
.mergeInputLeft
{
border-right-width: 0;
float:left;
background-color : white;
}
.mergeInputRight
{
border-left-width: 0;
outline : none;
}
The puspose is served. But these boxes appear slightly different from other boxes on the form as they now have a faint inner shadows on top and right/left borders. And it looks odd. I have checked other similar question, but most the solutions are for removing the borders completely.
Any suggestions!
There is a similar question. However anyone wants to know this is what I did:
.mergeInputLeft
{
border-right-width: 0;
float:left;
background-color : white;
border-style: solid none solid solid;
border-color:#999;
border-width:1px;
}
.mergeInputRight
{
border-left-width: 0;
border-style: solid solid solid none;
border-color:#999;
border-width:1px;
}
You just need to remove the borders, for instance by setting the border width to 0. In your case, you apply all kinds of styling to the other borders, which is probably causing the issue. This should be enough:
.a {
border-right-width: 0;
}
.b {
border-left-width: 0;
}
<input class="a" disabled value="Fixed text"><input class="b">
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.
For some reason one of my inputs acts weird. I apply general css for all my inputs
.text-input {
padding: 6px 10px;
background: #fff;
border-radius: 5px;
-webkit-border-radius: 5px;
width: 330px;
border-bottom: 1px solid #000;
}
and I apply this specific css for one particular div to make it higher
#letter {
height: 100px;
}
For some reason when I focus on #letter input and start typing text appears in vertical middle of it, I don't know what is causing the problem, but here is my page, if you focus on "Message" input you will see what I mean (tested in chrome).
http://freshbeer.lv/development/en/contact.php
Perhaps you want to use a textarea instead? input type="text" is single line only.
You should use a Text Area element for that.
<textarea></textarea>