Here I am using Oracle ADF.
My button is styled as follows:
af|commandButton:text-only {
background-image: none;
width: auto;
height: 30px;
border: 1px solid #c4ced7;
border-radius: 2px;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: center;
padding: 2px 10px 3px 10px;
}
af|commandButton:text-only:focus {
background-image: none;
width: auto;
outline: none;
height: 30px;
border: 1px solid #c4ced7;
border-radius: 2px;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: center;
padding: 2px 10px 3px 10px;
}
Removed focus outline using "outline:none;" as specified in the CSS snippet.
Now, focus outline is removed in all browsers except firefox.
As per the diagnosis I found that firefox uses "-moz-focus-inner" to render outline.
I tried the following two ways in CSS but no luck.
First way:
button::-moz-focus-inner {
border: 0;
}
Second way:
af|commandButton:text-only:focus::-moz-focus-inner,
af|commandButton:focus::-moz-focus-inner {
border:0;
}
How to specify styles for "-moz-focus-inner" in ADF ?
I had the same problem with my xul programm. The point was, that there was some shadow DOM hidden in the button, which has the dotted border.
This is how I made it work:
button *, button:focus *
{
border: 0;
}
Keep in mind, that the element within the button has a transparent border when the button is not in the :focus state. Therefor you have either to clear it for both states or just set the border to transparent too at :focus.
Hope that helps you too
Related
Morning,
I have the following code that works in all browsers other than IE. I want a blue border to appear when clicking on input boxes, however did not want to see the elements resizing and positioning. I fixed this by putting a border colour to match the background colour, thus removing the resizing effect. However, on IE, you get ghost borders which seem to be a combination of both the border radius and border colour (background colour). Any ideas of how to fix this without using box shadow?
Screen Shot showing ghost borders:
input,
textarea,
select {
position: relative;
display: block;
border: 3px solid #4f4f4f;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
&:focus {
outline: none;
border: 3px solid #4cc7fa;
}
}
Many thanks!
You can do like this to overcome the ghost/resize/re-positioning effect, where you change border-width on focus and compensate its re-positioning with a negative top
body {
background: gray;
}
input,
textarea,
select {
position: relative;
display: block;
border: 0px solid gray;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
}
input:focus {
top: -3px;
outline: none;
border: 3px solid #4cc7fa;
}
<input type="text">
I would use the following javascript:
Your-function() {
document.getElementsByTagName('input','textarea','select').classlist.toggle('show')
}
add display:none to input:focus
add the following css
.show
{
display:block;
}
Note: Add onclick="Yourfunction()" to your markup to load the js.
I have this CSS code for a textbox class and I'm on working on linux.
It's saved in a .css file and i'm using gedit. But the box-shadow property isn't recognized. All the others have that different font which shows a keyword or so. But not box-shadow. Any ideas please? It seems to work on windows when i use notepad++.
.textbox
{
background: white;
border: 1px solid #ffa853;
border-radius: 5px;
box-shadow: 0 0 5px 3px #00FFFF;
color: #666;
outline: none;
height:23px;
width: 275px;
}
You may be confusing box-shadow with text-shadow.
text-shadow applies to text, box applies to containers
I have made a small fiddle to demonstrate both
div {
width: 200px;
height: 300px;
background-color: #fff;
box-shadow: 10px 10px 5px grey;
}
p {
text-shadow: 1px 1px 2px black;
color: red;
font-size: 5em;
}
<div>
<p>
hello
</p>
</div>
if you are trying to adjust the appearance of an input (or a number of inputs)
a useful way of doing it is:
input[type="text"] {
/*your styles here*/
}
Dont know why the form's input button of the right (Aceptar) is smaller than the div made button of the left when the CSS is the same (except for a general border: 0 on the input's).
Any clues? CSS below:
Div button:
.boton {
width: 5em;
background-color: #8d99ae;
text-align: center;
border-bottom: 2px solid #2b2d42;
padding: 0.1em;
display: inline-block;
}
Input button:
input#boton {
width: 5em;
color: #edf2f4;
background-color: #8d99ae;
text-align: center;
border: 0;
border-bottom: 2px solid #2b2d42;
padding: 0.1em;
display: inline-block;
}
As Andrei mentionned, you should include a CSS reset. But I'm pretty sure that in your case, setting a "line-height" value would solve the issue.
I am trying to use Active Pseudo CSS class on text box in Firefox but seems like it is not working. Could any one suggest me a solution. below is the css code i am using :
hover is working fine. but on clicking on text box , active class should have been applied but it isnt.
.txtLogin
{
width: 100px;
float: right;
padding: 1px !important;
border: 1px solid #ccc;
height: 20px;
font-size: 12px;
font-weight: normal;
color: #000;
font-family: Arial;
}
.txtLogin:hover
{
background: #ededed;
border: 1px solid #bfbfbf;
border-top: 1px solid #b5b5b5;
}
.txtLogin:active
{
background: #d9d9d9;
border: 1px solid #bfbfbf !important;
}
:active only applies while the mouse button is held down...it is removed when the mouse button is released.
In your case, the pseudo-class is working, just, I suspect, not in the way you were thinking.
#MDN
The :active CSS pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. When interacting with a mouse, this is typically the time between the user presses the mouse button and releases it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on and HTML elements, but may not be limited to just those.
body {
background: lightblue;
}
.txtLogin {
width: 200px;
padding: 1px !important;
border: 1px solid #ccc;
height: 20px;
font-size: 12px;
font-weight: normal;
color: #000;
font-family: Arial;
}
.txtLogin:hover {
background: #ededed;
border: 1px solid #bfbfbf;
border-top: 1px solid #b5b5b5;
}
.txtLogin:active {
background: #d9d9d9;
border: 1px solid #bfbfbf !important;
}
<input type="textarea" class="txtLogin">
I had raised a bug for the same and mozilla has now fixed this bug. Here is the bug id https://bugzilla.mozilla.org/show_bug.cgi?id=1168055 . They have provided a patch for the same.
I think you are looking for focus. Try it like below.
.txtLogin:focus
{
background: #ff00ff;
border: 1px solid #bfbfbf !important;
outline:none;
}
DEMO
Some times I may may want an anchor beside a submit button, but I always seem to have problems lining them up ...
a, input[type=submit], input[type=button], button {
font-family: arial;
background: #fff;
color: #777;
border: 1px solid #ccc;
font-size: 12px;
line-height: 20px !important;
padding: 5px 10px;
margin: 0;
}
http://jsfiddle.net/cXgzM/
with that, anchors are still 2 pixels short
Simply add this to your CSS:
a
{
display: inline-block;
}
I updated your example. Note that this property doesn't work in IE7 and lower. :)