Replace browser native submit button with a clickable icon - HTML CSS CSS Form

HTML CSS examples for CSS Form:input submit

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input submit

Description

Replace browser native submit button with a clickable icon

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>replace native submit button with icon</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.2/awesomplete.css"> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> 
  <style>

.form-item-search-api-fulltext {
   display:inline;
   float:left;
}
input[type="submit"] {
   color: transparent;
   width: 25px;
   height: 22px;
   margin-left: -25px;
   background: none;
   border: none;
}
#edit-actions--2:after {<!-- w w  w  . ja  va2  s . co  m-->
   content: "\f002";
   font-family: FontAwesome;
   margin-left: -24px;
   pointer-events:none;
}


      </style> 
 </head> 
 <body translate="no"> 
  <form> 
   <div class="js-form-item form-item js-form-type-textfield form-item-search-api-fulltext js-form-item-search-api-fulltext"> 
    <input placeholder="rechercher dans la documentation" data-drupal-selector="edit-search-api-fulltext" id="edit-search-api-fulltext--2" name="search_api_fulltext" value="test" size="60" maxlength="128" class="form-text" type="text"> 
   </div> 
   <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions--2"> 
    <input data-drupal-selector="edit-submit" id="edit-submit--2" name="op" value="Recherche" class="button button--primary js-form-submit form-submit" type="submit"> 
   </div> 
  </form>  
 </body>
</html>

Related Tutorials