Problem with changing <button> to <input> - HELP!

AnonLeo · Jan 15, 2014

Hey,

I am having a problem with this <button> form.
This is how it looks like when there is a <button> code:
http://jsfiddle.net/FEF7D/

But I want to change it from <button> to <input> and I want the design (color, position, size) of the button stays the same. But it's not working for me.

This is how it looks like when there is a <input> code:
http://jsfiddle.net/4VNDh/

Please help me to solve this, waiting for replies

Thanks

Bazza525 · Jan 15, 2014

Hmm thats odd. I managed to get the them both the same just by changing any css selectors of button to .submit but the only problem was that the small arrow you had on the side of the button wont appear and I can not get it too. I had a feeling it has to do with the css you applied to input that only affected the text box before but now also affects the submit button so I tried adding :first-child so that it would only apply to the first input box(textbox) and not the submit button but that didn't work. Sorry couldn't help. If anyone else knows how to fix this please let me know

mypmmail · Jan 16, 2014

Firstly, there is a small mistake in the html in the sense that the input element is not closed properly.

But the main reason is in the css, a specific style is specified for button, but not input type=submit.
Although both render to be visually the same, they in fact follow different style if the css specified so.

Thus, basically, you need to duplicate the style specified for button with an additional entry of input[type="submit"] for every style specified.

But, as mentioned, you still need to fix the input element mistake first.

Code:

<input name="submit_btn" class="submit" id="submit_btn" value="Submit" type="submit"</input>

change to 
<input name="submit_btn" class="submit" id="submit_btn" value="Submit" type="submit" />

Code:

 body {
     font: 15px'Lucida sans', Arial, Helvetica;
     color: #eee;
     text-align: center;
 }
 a {
     color: #ffffff;
 }
 /*-------------------------------------*/
 .cf:before, .cf:after {
     content:"";
     display:table;
 }
 .cf:after {
     clear:both;
 }
 .cf {
     zoom:1;
 }
 /*-------------------------------------*/
 .form-wrapper {
     width: 570px;
     padding: 18px;
     margin: 5px;
     background: #444;
     background: rgba(0, 0, 0, .2);
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     border-radius: 10px;
     -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
     -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
     box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
 }
 .form-wrapper input {
     width: 450px;
     height: 20px;
     padding: 10px 5px;
     float: left;
     font: 18px arial, sans-serif;
     border: 0;
     background: #eee;
     -moz-border-radius: 3px 0 0 3px;
     -webkit-border-radius: 3px 0 0 3px;
     border-radius: 3px 0 0 3px;
 }
 .form-wrapper input:focus {
     outline: 0;
     background: #fff;
     -moz-box-shadow: 0 0 2px rgba(0, 0, 0, .8) inset;
     -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .8) inset;
     box-shadow: 0 0 2px rgba(0, 0, 0, .8) inset;
 }
 .form-wrapper input::-webkit-input-placeholder {
     color: #999;
     font-weight: normal;
     font-style: bold;
 }
 .form-wrapper input:-moz-placeholder {
     color: #999;
     font-weight: normal;
     font-style: bold;
 }
 .form-wrapper input:-ms-input-placeholder {
     color: #999;
     font-weight: normal;
     font-style: bold;
 }
 .form-wrapper button, input[type="submit"] {
     overflow: visible;
     position: relative;
     float: right;
     border: 0;
     padding: 0;
     cursor: pointer;
     height: 40px;
     width: 110px;
     font: bold 15px/40px'lucida sans', 'trebuchet MS', 'Tahoma';
     color: #fff;
     text-transform: uppercase;
     background: #4363aa;
     -moz-border-radius: 0 3px 3px 0;
     -webkit-border-radius: 0 3px 3px 0;
     border-radius: 0 3px 3px 0;
     text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
 }
 .form-wrapper button:hover, input[type="submit"]:hover {
     background: #4d6fb9;
 }
 .form-wrapper button:active, .form-wrapper button:focus, .form-wrapper , input[type="submit"]:focus, input[type="submit"]:active {
     background: #3B5998;
 }
 .form-wrapper button:before, input[type="submit"]:before {
     content:'';
     position: absolute;
     border-width: 8px 8px 8px 0;
     border-style: solid solid solid none;
     border-color: transparent #4363aa transparent;
     top: 12px;
     left: -6px;
 }
 .form-wrapper button:hover:before, input[type="submit"]:hover:before {
     border-right-color: #4d6fb9;
 }
 .form-wrapper button:focus:before, input[type="submit"]:focus:before {
     border-right-color: #3B5998;
 }
 .form-wrapper button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner {
     border: 0;
     padding: 0;
 }

hth

bartosimpsonio · Jan 16, 2014

Get Firebug, copy the CSS for the button tag and copy it under input tag CSS selector.

netbull2007 · Mar 10, 2014

Code:

 body {
        font: 15px 'Lucida sans', Arial, Helvetica;
        color: #eee;
     
   text-align: center;
    }
    a {
        color: #ffffff;   
    }
    /*-------------------------------------*/
    
    .cf:before, .cf:after{
      content:"";
      display:table;
    }
    
    .cf:after{
      clear:both;
    }

    .cf{
      zoom:1;
    }

    /*-------------------------------------*/    
    
    .form-wrapper {
        width: 570px;
        padding: 18px;
        margin: 5px;
        background: #444;
        background: rgba(0,0,0,.2);
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        -moz-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
        box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
    }
    
    .form-wrapper #statusid {
        width: 450px;
        height: 20px;
        padding: 10px 5px;
        float: left;    
        font: 18px arial,sans-serif;
        border: 0;
        background: #eee;
        -moz-border-radius: 3px 0 0 3px;
        -webkit-border-radius: 3px 0 0 3px;
        border-radius: 3px 0 0 3px;      
    }
    
    .form-wrapper #statusid:focus {
        outline: 0;
        background: #fff;
        -moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
        -webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
        box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
    }
    
    .form-wrapper #statusid::-webkit-input-placeholder {
       color: #999;
       font-weight: normal;
       font-style: bold ;
    }
    
    .form-wrapper #statusid:-moz-placeholder {
        color: #999;
        font-weight: normal;
        font-style: bold;
    }
    
    .form-wrapper #statusid:-ms-input-placeholder {
        color: #999;
        font-weight: normal;
        font-style: bold;
    }    
    
    .form-wrapper #submit_btn {
        overflow: visible;
        position: relative;
        float: right;
        border: 0;
        padding: 0;
        cursor: pointer;
        height: 40px;
        width: 110px;
        font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
        color: #fff;
        text-transform: uppercase;
        background: #4363aa;
        -moz-border-radius: 0 3px 3px 0;
        -webkit-border-radius: 0 3px 3px 0;
        border-radius: 0 3px 3px 0;      
        text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
    }   
      
    .form-wrapper #submit_btn:hover{        
        background: #4d6fb9;
    }    
      
    .form-wrapper #submit_btn:active,
    .form-wrapper #submit_btn:focus{   
        background: #3B5998;    
    }
    
    .form-wrapper #submit_btn::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

here is the html

Code:

<body>
    <form action="" method="post" name="myform" id="myform" onsubmit="return formSubmit(this);" class="form-wrapper cf">
        <input name="statusid" autocomplete="off" id="statusid" placeholder="Enter ID Here" required="" type="text">
        <input name="submit_btn" class="submit" id="submit_btn" value="Submit" type="submit" />
    </form>
</body>

but if you want the arrow back you have to play with wrapping the input field in span, div or whatever.

Problem with changing <button> to <input> - HELP!

AnonLeo

Regular Member

Bazza525

Newbie

mypmmail

Junior Member

bartosimpsonio

Elite Member

netbull2007

Newbie

Main Menu

Marketplace

Making Money

BlackHat World