Rimuovi il bordo dalla casella di input bootstrap

Question

Sto creando un sito Web utilizzando il bootstrap, meno e angolare e ho lottato tutto il giorno con il campo di input per la barra di ricerca. Ho provato ad usare il gruppo di input bootstrap con sia input-group-addon che input-group-button ma non riesco a essere in grado di rimuovere il confine tra il pulsante e l'input. In realtà non posso cambiare il confine. Qualche suggerimento su come potrei farlo. Vorrei che la mia casella di ricerca avesse lo stesso comportamento di duckduckgo.

UPDATE:

<form role="form" action="results.html" style="padding:30px"> 
<p class="input-group"> 
    <input type="text" class="form-control" name="q" /> <span class="input-group-addon" style="border-left-width: 0px"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span> 
    <input type="hidden" name="mode" value="web" /> 
</p> 

Quindi questo è il mio codice. Non so come fare un JSFiddle con esso in modo che lo stile di bootstrap sia preservato. Ho anche provato a inserire html e css da questo link http://jsfiddle.net/CbGpP/2/ nel mio codice e la linea tra il pulsante e l'input è ancora conservata, né diventa verde al clic.

Answer 1

Essendo molto sciocco, nell'index.html ho aggiunto il foglio di bootstrap quindi il mio custom e ancora il bootstrap. L'eliminazione dell'ultima riga ha risolto tutti i miei problemi.

Answer 2

Se ti ho preso bene allora fare outline: 0 dovrebbe risolvere il tuo problema.

Se ho sbagliato, invia qualche foto in modo che possiamo vedere il tuo problema reale e anche pubblicare i codici di ciò che hai provato fino ad ora.

EDIT:

Ecco il violino: http://jsfiddle.net/f257xosu/

Fondamentalmente è necessario rimuovere il bordo destro del campo di testo, il bordo dell'icona e il colore di sfondo dell'icona sinistra.

Aggiunto un codice categoria search-input al campo di testo e search-icon all'icona.

Ecco il CSS:

.search-input { 
    border-right: 0; 
} 

.search-icon { 
    border-left:0 solid transparent; 
    background:transparent; 
} 

Answer 3

Impostazione border:none; dovrebbe farlo.

Answer 4

Questa domanda ha risposto in questo link Bootstrap: Remove form field border

Fondamentalmente ciò che devi fare è sufficiente aggiungere il seguente CSS alla classe form-controllo

.form-control { 
    border: 0; 
    } 

Dopo questo, si otterrà la casella di inserimento senza bordo .

O anche si può fare così

.no-border { 
    border: 0; 
    box-shadow: none; /* You may want to include this as bootstrap applies these styles too */ 
    }