-1

Criei um form e enquanto digito aparece um x azul no fim, como faz pra retirar ele? segue o html e 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> 

3
  • 1
    Isso não eh do bootstrap, eh do user-agent do próprio browser e está ali para melhorar a usabilidade, na pratica ao remover isso vc esta prejudicando o usuário
    – hugocsl
    Commented 16/07/2020 às 1:41
  • porque retirar, qual motivo
    – novic
    Commented 16/07/2020 às 1:44
  • Por motivos de estética, pretendo por o botão de pesquisa dentro do form exatamente onde aparece esse 'x' Commented 16/07/2020 às 1:46

1 Resposta 1

0

CCS

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

Envolva em uma div para setar o tamanho col-xs-2 ou col-xs-3 ....

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

O código total

#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>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .