I am having a bit of a problem styling the commandbutton of the primefaces 3 application.
My common CSS has this style
body {
font-size: small;
}
and my primefaces button has this
<p:commandButton value="Search" ajax="false" style="padding:0px;"/>
I wanted to remove some padding on the button itself so I have set its style as above.
But nothing is happening?
Is there a way to remove the excess padding on command button?
Thanks
The css class that is responsible for the padding is .ui-button-text. You can verify it with Firebug or some other tool.
You could override this default style with the following code snippet. Put it in the header section of your page:
<style type="text/css">
.ui-button-text {
padding: 0px !important;
}
</style>
Not sure why, but in my case this was not working.
Alternative way is using display:none; as shown below.
<style type="text/css">
.ui-button-text {
display:none;
}
</style>
Related
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;
}
I am using AjaxToolkit combobox in my page... I am trying to change the width of combo-button . But I couldnot. Because it has inline style by default..
I tried the following code to add style
//Combo css
.ComboClass .ajax__combobox_buttoncontainer button
{
border-radius: 0px;
box-shadow: 0px;
width :12px; height:12px;
}
But border-radius and Box-shadow styles are applying but Width& height is not applying ..
Because ComboBox Button got default inline styles.. I cant remove that line styles too..
Please post me some suggestions....
Add a javascript function to search for and strip the attributes on document ready.
The jquery way is:
$(document).ready(function()
{
document.find(".ajax__combobox_buttoncontainer").removeClass("ajax__combobox_buttoncontainer").addClass("myAwesomeClassWithCoolDimensions");
});
Make sure your css has a myAwesomeClassWithCoolDimensions class.
Finally it works.. Little change on my css. I just added !important property to override the default element (Inline styles)..
<style type="text/css">
.ComboClass .ajax__combobox_buttoncontainer button
{
box-shadow: 0px;
width: 14px !important;
height: 15px !important;
}
</style>
Now I can change width & height of the combo-button.
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.)
Given is the following page (SSCCE, just like we all like it):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
* {
border:0;
margin:0;
padding:0;
}
body {
background:#BCD5E1;
font:.85em Verdana;
}
#flag_panel {
position:absolute;
right:15px;
top:20px;
}
#flag_panel img {
vertical-align:middle;
}
#flag_panel .selected_image {
border:solid 2px #444;
padding:5px;
}
</style>
</head>
<body>
<div id="flag_panel">
<a href="#">
<img src="ro.gif" />
</a>
<img class="selected_image" src="us.gif" />
</div>
</body>
</html>
This HTML file together with the 2 images can be found at the URL: image-problem.zip (1.6 KB)
The expected result is:
But the actual result is:
As you can see, there's a little underscore between the 2 images. And I can't figure out why.
I tried this code in Firefox v24 and in Chrome v31. So I'm pretty sure I'm the one missing something.
I noticed that this problem goes away in 2 situations:
if the <img class="selected_image"... comes before <a href="#"... (a.k.a. if they're swapped)
if the first image is NOT enclosed inside an achor tag (<a>).
The goal of this piece of code is to be able to switch languages between English and Romanian on a site that I own. So one of the images must always have that border around it and the other must always be clickable. But I want to be able to do this without that underscore appearing there (looks ugly / buggy).
Any ideas on how to solve this ? Thanks.
Put the a tag element and its content on one line, like: <img src="ro.gif" />
EDIT:
The text-decoration: none; approach still leaves you with a clickable white space.
Just use the below in your code
#flag_panel a {
text-decoration: none;
}
Because you are using, so white space is the issue there
<a href="#">
<img src="#" />
</a>
So that's nothing but default text-decoration
Generally you should use the below snippet in your CSS
a {
text-decoration: none; /* Gets rid of dirty default underline */
}
Note: The above is an element selector, will select all a elements
in the document, but this is a general approach so thought I should
share one..
Also, I just went through your profile and I saw that you are not that friendly with HTML and CSS, so here's a tip for you, use CSS Reset stylesheet, it will save your time when dealing with cross browser inconsistencies ... Or if you are not that worried about.. than use the below snippet in your CSS..
* {
margin: 0;
padding: 0;
outline: 0;
}
The above selector simply selects all the elements in your document and gets rid of all the default margin and padding of the elements which are applied by the browser default stylesheet.
I think your problem is with text-decoration property that for default is underline in a tags. Just add this to the CSS:
a {
text-decoration:none;
}
The demo http://jsfiddle.net/XF2qL/6/
I'm not sure but closing the outer div is missing?
I'm writing an external user stylesheet for an old HTML page that specifies the background colour in the body tag: <BODY BGCOLOR="#808000"> (note: I can't edit the HTML).
I've tried writing the obvious stylesheet:
body {
background-color: #ffffff !important;
}
but it has no effect: the original colour remains.
Can it be done with CSS? If so, how?
FIX:
I've checked it in my place it works
body
{
background-color: white;
}
You can also do
<body style="background-color:red"></body>
It works fine here (I tested it). Are you sure the stylesheet is being imported properly?