I am trying to remove the small blue border around my submit button which appears when it's pressed. I tried to fix it with border: none; but that didnt fix it.
Currently my code looks like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
<link rel="stylesheet" type="text/css" href="hover.css" />
</head>
<body>
<form id="button1" action="#" method="post">
<input type="submit" value="ORANGE"
class="btn btn-warning"/>
</form>
</body>
</html>
Jsfiddle
I'm using XAMPP to run it on localhost and Google Chrome 42.0.2311.90
UPDATE
.btn:focus {
outline: none;
}
This fixed it for me! I do not not plan on making my site accessible via keyboard so I do not need the blue outline. It's just for looks.
I think you are looking for something like this:
<style>
.btn:focus {
outline: none;
}
</style>
Add the above styles inside head tag.
By default, bootstrap have outline color blue for focused buttons.
You can remove/update it using class "btn" like mentioned above.
UPDATE
As #MatthewRapati suggested: This outline let's people know that the
button has focus and should not be removed. It is an accessibility
concern. It is better to restyle it if the default is not wanted
Remove the "outline" from the button on click (a:focus)
.btn:focus {
outline: none;
}
Demo :http://jsfiddle.net/baqunkn1/
.btn-warning {
color: #ffffff;
background-color: #ff851b;
border-color: #ff7701;
border: none;
outline:none;
}
Outline are primarily used for accessibility settings, and should be retained for default behavior unless you are providing some mechanism or highlight for focus/accessibility. If you simply remove without providing the same and user uses Keyboard to navigate, he will not be able to know what link/button he is currently on and may ruin the overall experience with your page.
Remove the outline from button
.btn-warning:focus{
outline:0px;
}
You can also remove outline from all the buttons using
input[type=button]:focus,input[type=submit]:focus{
outline:0px;
}
Default button focus has outline of 1px blue on Chrome. There are many more items which have outline, you can disable all of them using:
*{
outline:0px;
}
Related
I have a standard "Contact Form 7" Send File as Attachment Form on wordpress:
<label>UPLOAD FILE
[file uploadedfile]
</label>
I am already searched stackoverflow etc etc etc.
After 2hrs I gave up :(
How can I change the Color of the background and the font size easily?
If I get in touch with the file form control directly it will blast up like a giant. This is not useful for computers and never responsiv für mobile.
And as a second question.
Is it possible to format the "No file selected" differently from the "Search computer (Durchsuchen)"?
Although it's difficult to style a file input itself due to browser compatibility, you can instead apply styling to its label to achieve the same result.
Take a look at this example input:
<label for="fileInput">
Upload file
</label>
<input id="fileInput" type="file">
Because the label is directly linked to the input, it will open the file browser once you click on either the label or the input. Since that's the case, you can hide the input itself and only display the label.
<style>
input[type="file"] {
display: none;
}
</style>
Now that you're left with only the label, you can apply styling to the element to make it look more like a button instead of a label. Take a look at this basic example of CSS you could use to style the label.
<style>
label[for="fileInput"] {
border: 1px solid black;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
</style>
Here's what you'll end up with after hiding the input and add styling to the label. Of course, this is just a basic example, but there are almost no limits to what you can achieve through CSS, so you could style the label any way you'd like.
Putting it all together, the final code for this implementation will look something like the following:
input[type="file"] {
display: none;
}
label[for="fileInput"] {
border: 1px solid black;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
<!doctype html>
<html>
<head>
<title>File upload styling</title>
</head>
<body>
<form method="post">
<label for="fileInput">
Upload file
</label>
<input id="fileInput" type="file">
</form>
</body>
</html>
Since you're using WordPress, you'll just end up putting the CSS in your theme styles, but the implementation should be almost identical as to what it would be with a static HTML site.
I'm using a the Hugo Bigspring theme with Bootstrap 4 on a website. My primary call to action buttons are orange vs. the secondary green. However, my orange buttons turn green on hover and I cannot figure out why.
Code for the button:
Contact Us
CSS:
.btn-primary:hover,
.btn-primary:focus {
background-color: #F37021!important;
border-color: #F37021!important;
box-shadow: none;
outline: none;
}
.btn-primary {
color: #fff;
background-color: #F37021!important;
border-color: #F37021!important;
You can view the site live here: https://www.bridge12.com.
The orange buttons are on the top right and the bottom of the page.
Really appreciate your help - I've been banging my head against the wall for hours on this one.
This code block in your CSS is changing the color:
.btn-primary:active,
.btn-primary:hover,
.btn-primary.focus,
.btn-primary.active {
background-color: #46812b !important;
border-color: #46812b !important;
}
By checking your website and inspecting the element this is what is shows
So it looks like either bootstrap or another custom CSS is overwriting your code.
Make sure that bootstrap css is always loading before your custom code.
Your background-color for btn-primary is set to #46812b!important; which i am sure it is not bootstrap css, that only means that you have that declared somewhere in your css. double check and you will find it.
Thank you all - this was very helpful. I was loading the style sheets in this order:
<!-- Custom Stylesheet -->
<link rel="stylesheet" href="http://localhost:1313/css/custom.css">
<link href="http://localhost:1313/scss/style.min.css" rel="stylesheet" media="screen"/>
Changing it to this fixed it immediately:
<link href="http://localhost:1313/scss/style.min.css" rel="stylesheet" media="screen"/>
<!-- Custom Stylesheet -->
<link rel="stylesheet" href="http://localhost:1313/css/custom.css">
Huge Thanks!
i just started programming and I wanted to try css with html. However, I keep running into errors like these where I want a button, however when displayed on browser the said button becomes a link.
can someone explain?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Linking External Style Sheets</title>
<style>
h1 {
color: blue;
}
a {
color: blue;
text-decoration: none;
}
a:hover {
background-color: yellow;
}
</style>
</head>
<body>
<div><p><em>Click here:</em>
<a class="w3-btn" href="http://www.w3schools.com">Link Button</a>
</div>
</body>
</html>
I wanted to give it a border, background and text color also, and make it change when theres a mouse over it with the code...
If you want a button then simply use <button> instead of <a>:
<button class="w3-btn" href="http://www.w3schools.com">Link Button</button>
However, you can't use href with a button since buttons are suited for forms. In this case you can either style the link to look like a button (#RahulB answer) or wrap the (real) button in a form which submits to http://www.w3schools.com.
<form action="http://www.w3schools.com" method="POST">
<button class="w3-btn" type="submit>Link Button</button>
</form>
You can style the link as button --
a{
color: blue;
text-decoration: none;
border : 1px solid black;
padding : 10px;
background-color : cyan;
border-radius: 10px;
appearance : button;
}
Fiddle link : https://jsfiddle.net/vgwgsoqt/1/
Here is the code I have so far:
HTML:
<!DOCTYPE html>
...
<form>
<input type="image" value=" " class="btnimage" />
</form>
...
CSS:
.btnimage {
width: 80px;
height: 25px;
background:url('C:/Users/John/Desktop/Misc Things for the CoD Ghosts Site/SubmitButton.png');
}
.btnimage:hover {
background-position: 0 -25px;
background:url('C:/Users/John/Desktop/Misc Things for the CoD Ghosts Site/SubmitButtononHover.png');
}
The above code works, but there's a border that surrounds the button, which I want to go away. So far, I've tried adding background-border:0; to both of the classes, and it did not work.
try
input {
/* sets border width to 0 and border style to none */
border:0 none;
}
or
input {
border: 0px solid black;
}
background-border is not a css property
You can remove a border with css by setting it's width to 0 or it style to none.
To avoid an internet explorer legacy bug, you have to specify a border-width or a border-color to make border-style:none apply. So your best bet if you care about my grandma, it to use border:0 none;
.btnimage {
border: 0 none;
width: 80px;
height: 25px;
background:url('C:/Users/John/Desktop/Misc Things for the CoD Ghosts Site/SubmitButton.png');
}
Since you did not mention when your border is visible, perhaps it an outline visible on your input focus.
If it is your case, add :
.btnimage:focus {
outline:0
}
input {
border:0 none !important;
outline:0 !important;
}
The main problem here is that you define an input type="image", but not provide a source, so this border is like a broken image, because when you set the type as image the input expects an src attribute as well.
In my opinion you have 2 solutions:
1st: set the "src" property of the input, in the HTML code, and if you want to change the hover image, you can do this through javascript.
<!DOCTYPE html>
...
<form>
<input type="image" src="your_image_url" class="btnimage" />
</form>
...
2nd: change it to input type "button", or a link " ", than remove border and background in the CSS.
<!DOCTYPE html>
...
<form>
<input type="button" class="btnimage" />
</form>
...
Sample: http://jsfiddle.net/Bpv34/
CSS
border:none none;
Yes working
To remove the border, write the following line in your CSS wherever the border appears:
outline: 0;
try the prefixes too
input {
border:0 none;
-moz-border:0 none;
-webkit-border:0 none;
outline: 0; //add this too
}
try this
input {
border:0 none !important;
}
by writing important it will definately work.
1) Use src attribute to define image url.
2) Use custom button with div - something like:
<div class="btnimage" onclick="blablabla()">Button</div>
It can solve the problem.
This finally worked for me. All attempts with "border" did not work:
input { outline: 0 !important; }
I was just having trouble with this too.
First off, you may as well set the src equal to an image you want to use if you are using the input type of 'image'
Here is mine: <input type='image' src='img/share.png' alt='Share'>
Then make adjustments in your css:
#fbshare input[type="image"] {outline:none;}
#fbshare input[type="image"]:active {outline:none;}
This solved my problem in Chrome, and I presume it should solve yours too. If it is still a problem nearly 2 years later. (I mostly posted this for others who find this page in a google search)
This page helped me come to the above conclusion.
http://themeforest.net/forums/thread/remove-border-after-clicking-button/33948
I was having the same problem as the OP - specifically for an image input. It certainly seems to be because of the browser interpreting it as a "broken image" if no src attribute is set.
So this works as a solution, by setting the attribute to a single transparent pixel, the image input non-border non-outline "border" goes away:
<input type="image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="btnimage">
No CSS needed (or seems to work.)
Hi I want to get rid of the blue "shine" that appears when you click on a text field and begin to input data. How is this done?
I am a beginner so I am not that experienced.
My code is:
<input type="text" name="search" size="40" value="Job Title e.g. Assistant Manager"
style="background-color:white; border:
solid 1px #6E6E6E; height: 31px; font-size:16px;
vertical-align:0px;color:#bbb"
onfocus="if(this.value == 'Job Title e.g. Assistant Manager'){this.value =
'';this.style.color='#000'}" />
Thanks!
James
This CSS snippet should work in all major browsers:
input:focus {
outline:none;
}
If it doesn't, try adding the !important directive:
input:focus {
outline:none !important;
}
You simply add:
<style type="text/css">
#hello:focus
{
outline:none;
}
</style>
<input type="text" id="hello"></input>
cheers!
You can use below style property on element to avoid blue border.
style="box-shadow: none;"
For example:
Here, I've used in my button
<button type="button" style="box-shadow: none;">Button</button>
Although it's not directly related, I leave a note here since this SO page is what came up in my search. The answers listed here also work for html5 videos. In my case, there was a blue border showing underneath the video in Chrome.
For completeness sake:
video
{
outline:none;
}
If you want easy solution and want to remove blue border from complete html, use
*:focus {outline:none !important}