CODEWITHSUNDEEP
cssformsfirefox
Nrc
Nrc

Reputation: 9797

Submit button css. The outline in Firefox

I want to control de design of the submit button of a form but I don't want to get rid off the outline (the blue border around) on focus. I have problems with Firefox.

I think it is important for accessibility and because a lot of people use the tab to fill the forms. The outline gives an orientation to see what is selected.

I think the key point is the border, I think that to control the design I should give some css to the border, even border none. If I give a border in Firefox, the outline disappear and some ugly dotted lines appear. I can get rid of that lines with ::-moz-focus-inner {border:0;} But then, I don't know how to give a shadow only to Firefox.

So there the question is:

I have the example live here: http://jsfiddle.net/56mfx/15/

CSS: 

input[type="submit"] {    
    width: 80px;
    height: 25px; 
    color: #fff;
    background-color: #ccc;
    border:solid thin #ddd;
}​

HTML: 

<input type="submit" name="submit" value"send" id="submit">​

Upvotes: 1

Views: 2777

Answers (3)

Sandeep Pattanaik
Sandeep Pattanaik

Reputation: 632

Here is the custom submit button for you. You can also use image.

HTML:

<input type="submit" value="Submit" class="submit" />

CSS:

.submit{
    background:#BDBDBD;
    height:30px;
    width:100px;
    border:none;
    color:#2E2E2E;
    font:family:Arial;
    font-weight:bold;
    font-size:15px;
    cursor:pointer;
}

.submit:hover{
    background:#DF01D7;
}

Upvotes: 1

George
George

Reputation: 36794

You know, you could just create a <div> and then have that submit your form.

<div class="sbmtBtn" onmouseup="document.forms['myform'].submit()">Submit</div>

And then style it

.sbmtBtn{
    width: 80px;
    height: 25px; 
    color: #fff;
    background-color: #ccc;
    border:solid thin #ddd;
    /* Use the following to set a shadow only in FF */
    -moz-box-shadow: 0 0 3px #000000;
}

I always prefer to use a <div> as a button because I have more control.

Upvotes: 0

g.annunziata
g.annunziata

Reputation: 3266

You can resolve with:

input[type="submit"] {    
     width: 80px;
     height: 25px; 
     color: #fff;
     background-color: #ccc;
     border:solid thin #ddd;
     outline: none;

     -moz-box-shadow: 0 0 3px #333;

     /* or for outline:
     -moz-outline: 1px solid #c00;
     */
}

Upvotes: 0

Related Questions