CODEWITHSUNDEEP
cssbrowser
Matoeil
Matoeil

Reputation: 7299

replace browser native submit button with a clickable icon

This code hides the native button and replace it with an icon. Very well

The problem is the icon is then not clickable.

How can i fix this in CSS?

https://codepen.io/matoeil/pen/yvVOLj

<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-item-search-api-fulltext:after {
  content: "\f002";
  font-family: "FontAwesome";
  right:30px;
  position:relative;
}

input[type="submit"] {
  border: none;
  background: none;
  color: #333;
  text-indent: -9999px;
  display: none;
}

Upvotes: 0

Views: 78

Answers (1)

roest
roest

Reputation: 376

You could use javascript to catch and progress that click event on .form-item-search-api-fulltext:after.

Without javascript and without modify your HTML Code:

  • use that existing submit button
  • put him in position
  • hide the text with color:transparent;
  • layer an icon over the button via your :after selector of the button container
  • make icon invisible to click events pointer-events:none;

https://codepen.io/roest/pen/bLBwNN

.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 {
    content: "\f002";
    font-family: FontAwesome;
    margin-left: -24px;
    pointer-events:none;
}

Upvotes: 1

Related Questions