1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Discussion in 'HTML & JavaScript' started by AnonLeo, Jan 15, 2014.

Tags:
  1. AnonLeo

    AnonLeo Regular Member

    Joined:
    Nov 23, 2013
    Messages:
    362
    Likes Received:
    263
    Location:
    USA
    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 :D
     
  2. Bazza525

    Bazza525 Newbie

    Joined:
    May 30, 2013
    Messages:
    4
    Likes Received:
    6
    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 :)
     
    • Thanks Thanks x 1
  3. mypmmail

    mypmmail Junior Member

    Joined:
    Jan 31, 2008
    Messages:
    111
    Likes Received:
    27
    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
     
    • Thanks Thanks x 1
  4. bartosimpsonio

    bartosimpsonio Jr. VIP Jr. VIP Premium Member

    Joined:
    Mar 21, 2013
    Messages:
    8,862
    Likes Received:
    7,467
    Occupation:
    ZLinky2Buy SEO Services
    Location:
    ⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩
    Home Page:
    Get Firebug, copy the CSS for the button tag and copy it under input tag CSS selector.
     
    • Thanks Thanks x 1
  5. netbull2007

    netbull2007 Newbie

    Joined:
    Mar 7, 2014
    Messages:
    8
    Likes Received:
    6
    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.