i wanted to make a log-in button with the type="submit" with an image that has an hover image too and :active image also,
well its work fine on firefox and chrome, but on internet explorer its just give the basic image and not giving the hover image and the active image.
and beside that, its make a dotted line on the button when you click on it.
how its show on IE:
http://imageshack.us/photo/my-images/72/ieproblem.jpg/
how its show on chrome and firefox:
http://imageshack.us/photo/my-images/685/chromes.jpg/
.button
{
border:none;
background: url(../img/login.jpg);
width:41px;height:19px;
}
.button:hover
{
background: url(../img/loginhover.jpg) no-repeat top left;
width: 41px;
height: 19px;
}
.button:active {
background: url(../img/loginactive.jpg);
}
the button code on HTML:
<input type="submit" class="button" value=""/>
If you are using earlier versions of IE, it has issues with :hover.
if you are using the ie7 >
you need to add href to your anchor, :hover is not picked up by IE otherwise:
and to remove the outline you can try
a {
outline: 0;
}
I believe this is caused by the outline property within IE.
Check out http://css-tricks.com/removing-the-dotted-outline/ for some tips on how to remove it.
a {
outline: 0;
}
Or apply the outline style to other elements.
Related
I have an input of type="submit" and I want exist no blue border around this element when I clicked (right or left click) on it.
I added the picture of OK mode and not OK mode in chrome browser below:
OK mode picture is similar to:
And Not OK mode picture is similar to:
I should say this problem exist in Firefox browser too but the style of that extra borders is dotted.
I tried many ways to solve this problem using CSS like:
Setting border:none; or border-width:0; in default mode and :hover mode and :focus mode of the input but it doesn't fix and still remained.
Also I read some articles about it like this but it doesn't work yet and not working for me.
Any advanced help will be great.
You need to set
outline: none;
input[type="submit"]{
background: #0075E9;
border-radius: 50px;
padding: 15px 30px;
color: #FFD400;
outline: none;
font-weight: bold;
}
<input type="submit" value="Go to the next step"/>
I have a button on a form;
<button type="button" class="button" onclick="validate_form_newsletter_wide( form )"><img src="index_htm_files/btn_newsletter_wide.png" alt="Send"></button>
It styled using;
<style>
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
#form_newsletter_wide .button {
position:relative;
float: right;
cursor:pointer;
border: 0px;
padding: 0px;
margin: 0px;
margin-top: -1px;
z-index:100;
}
</style>
When clicked in Firefox nothing about the button changes, in Chrome I get a highlight border around the button which I can live with but in IE it's more of a pressed effect where the button almost seems to move down and right. Is there anyway to prevent this?
It's a browser behaviour, a simple solution is to use a link tag instead of button (since you're calling a javascript function).
<img src="myimg"/>
If you still want to use the , I've found that there are some characteristics on each browser (in a simple debug):
Chrome adds outline and padding
Firefox adds a whole lot of stuff with the standart button border
IE messes with the inner text position
So to fix them, you have to manipulate the pseudo selectors for the button behaviour. And for IE, a good solution is to envolve your text on a element, and make it relative positioned. Like so:
<button type="button" class="button"><span>Buttom or Image</span></button>
<style>
button,
button:focus,
button:active{
border:1px solid black;
background:none;
outline:none;
padding:0;
}
button span{
position: relative;
}
</style>
Pen
EDIT: As #geca noted in the comments, this is a known WebKit bug. Let's hope it gets fixed soon!
The ::selection pseudo-element allows one to style the selected text. This works as expected but not for textareas and inputs in Google Chrome 15.
(I'm not sure if it's a webkit or chrome issue since I can't use Safari on Linux.)
Here's a jsfiddle demonstrating this issue: http://jsfiddle.net/J5N7K/2/
The selected text at the pargraph is styled as it should be. The selected text in the textarea and input isn't. (But it is at Firefox.)
Am I doing something wrong or is it just not possible to style it at Chrome right now?
Is a <div> with contenteditable an option? Functions just list a <textarea> for most things.
Demo: http://jsfiddle.net/ThinkingStiff/FcCgA/
HTML:
<textarea><textarea> Doesn't highlight properly in Chrome.</textarea><br />
<input value="<input> Doesn't highlight properly in Chrome." />
<p><p> Highlights just fine in Chrome!</p>
<div id="div-textarea" contenteditable><div contenteditable> Highlights just fine in Chrome!</div>
CSS:
textarea, input, p, div {
width: 400px;
}
#div-textarea {
-webkit-appearance: textarea;
height: 32px;
overflow: auto;
resize: both;
}
::selection {
background-color: black;
color: white;
}
Output (Chrome):
This is a known WebKit bug. Sorry, no solution thus far :)
Update: the WebKit bug was fixed on 10/13/2014.
Is there any chance that instead of using CSS pseudo-element you can use some jQuery.
take a look at this http://jsfiddle.net/J5N7K/6/.
if you don't understand the jQuery feel free to ask about it.
use this :
::-moz-selection {
background: var(--blue);
color: var(--white);
}
::selection {
background: var(--blue);
color: var(--white);
}
I'm trying to theme a search form with button and I have problem with text positioning in the button. Chrome and Opera are showing the button properly, but Firefox is not.
HTML:
<button type="submit"><span>Search</span></button>
CSS:
button {
border: 0;
background: red;
padding: 0;
width: 200px;
height: 50px;
position: relative;
}
button span {
position: absolute;
top: 0;
left: 0;
}
In Opera and Chrome the span is at the top left corner. In Firefox the padding at top and left and the top position begins in the middle of the button height.
What am I doing wrong?
Live demo: http://doctype.n-joy.sk/button/
Thanks
That's a strange one. Looks like Firefox is keeping some kind of proprietary padding inside of button element. The workaround I was able to implement was a FF-only piece of CSS with a rather ugly negative margin for the span... A quick fix really, maybe others can follow with something better.
button {
background: red;
border: 0;
padding: 0;
margin: 0;
}
button span {
display: block;
background: blue;
width: 200px;
height: 50px;
}
// FF only:
#-moz-document url-prefix() {
button span {
margin: -1px -3px;
}
}
It looks like you did everything correctly, but there is some dark magic emerging from the default styles of Firefox, and from some undocumented, hidden (pseudo-)elements attached to buttons.
I haven't yet found the rule which would help you with this button issue, but you may try to scan the default styles yourself. If you type in Firefox's address bar: resource://gre-resources/forms.css, then you will see one of its default stylesheets.
Some of suspicious selectors (just wild guesses) are: *|*::-moz-button-content or input > .anonymous-div. The second one does not seem to be defined for button, but who knows where else the magic lies?
In any case, I suppose, you might report it as a bug.
Found this in Twitter Boostrap reset.less file.
It corrects this behavior.
button,
input {
*overflow: visible; // Inner spacing ie IE6/7
line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
}
button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
padding: 0;
border: 0;
}
Note that comments are in less... not CSS so you have to replace // by /* ... */
I'm trying to style the submit button on the wordpress search widget, but Opera is giving me trouble.
I've set a 1px solid border on the button, and it appears fine until the text input is activated, then the border on the button seems to disappear (or becomes black, i can't tell).
This does not happen in firefox where the button appears the same even if the text field is activated.
This is the css i have now:
li.widget_search #searchform #searchsubmit
{
height: 24px !important;
border-color: #ff9900;
border-width:1px;
border-style: solid;
background-color: #201300;
font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
font-size: 11px;
letter-spacing: 1px;
color: #FFB100;
padding: 0px 3px 0px 3px;
overflow: hidden;
}
li.widget_search #searchform #searchsubmit:active
{
border: 0px;
}
This is an Opera issue. It always adds a black border if a border is specified on button focus, regardless of the settings of that border (color or style at least). All other browsers display a nice blue border here, inheriting all the settings from the normal button CSS rule.
You can prevent this on your own button by removing the border from the button:focus style.
Try...
a.button:active { border:0px; }
How about this:
I think Mr. David Murdoch's advice is the best for Opera ( here ). I've tried his approach in Opera and I succeeded basically doubling the input tags in this way:
<input type="submit" value="Go" style="display:none;" id="WorkaroundForOperaInputFocusBorderBug" />
<input type="submit" value="Go" />
This way the 1st element is hidden but it CATCHES the display focus Opera would give to the 2nd input element instead. LOVE IT!
Use a button element instead of an input, e.g.
<button type="submit">Submit</button>
and you won't see the black border in Opera.