How to remove 'x' at the end of the bootstrap form

Asked

Viewed 83 times

-1

I created a form and while typing a blue x appears at the end, how do you remove it? follow html and css:

inserir a descrição da imagem aqui

#formSearch {
    background-color: #fffafa;  
    border: 1px solid black;
    min-width: 200px;
}

#formSearchButton {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: rgba(red, green, blue, 100%);
    border: 0;
    margin-left: 30px;
    padding: 1px 1px 1px 1px;
}
#formSearchButton i {
    color: black;
          <form class="form-inline ml-auto">
          <input class="form-control form-control-sm" type="search" placeholder="Search on IMDb" id="formSearch" > 
          <button class="btn btn-sm" type="button" id="formSearchButton" >
            <i class="fa fa-search"></i>
          </button>
        </form>

css
  • 1

    This is not from bootstrap, is from the user-agent of the browser itself and is there to improve usability, in practice when removing this you are harming the user

  • why withdraw, what reason

  • For aesthetic reasons, I intend to put the search button inside the form exactly where appears this 'x'

1 answer

0

CCS

  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
  }

Wrap in a div to set the size col-xs-2 or col-xs-3 ....

   <div class="col-xs-2"><input class="form-control form-control-sm" type="search" placeholder="Search on IMDb" id="formSearch" ></div>

The total code

#formSearch {
    background-color: #fffafa;  
    border: 1px solid black;
    min-width: 200px;
}

#formSearchButton {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: rgba(red, green, blue, 100%);
    border: 0;
    margin-left: 30px;
    padding: 1px 1px 1px 1px;
}
#formSearchButton i {
    color: black;
}

  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

          <form class="form-inline ml-auto">
          <div class="col-xs-2"><input class="form-control form-control-sm" type="search" placeholder="Search on IMDb" id="formSearch" ></div>
          <button class="btn btn-sm" type="button" id="formSearchButton" >
            <i class="fa fa-search"></i>
          </button>
        </form>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.