it-swarm.com.de

entfernen Sie die Ränder um die HTML-Eingabe

Ich möchte eine Suchfunktion für meine Web-App erstellen.

hier sind die Blicke auf FF & IE, es ist ok ohne fremde Grenze

Feuerfuchs

enter image description here

IE

enter image description here

und hier sehen Sie Chrome & Safari, es hat einen seltsamen Rand um das Eingabeelement

Chrom

enter image description here

Safari

enter image description here

Hier ist mein HTML- & CSS-Code

<input type="search" id="generic_search" onkeypress="return runScript(event)" />
<input type="button" id="generic_search_button" />

der border:0 wurde auf alle Elemente angewendet

enter image description here

#generic_search
{
    font-size: 14px;
    width: 250px;
    height: 25px;
    float: left;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 7px;
}
#generic_search_button
{
    float: left;
    width: 25px;
    height: 25px;
    margin-top: 7px;
    cursor: pointer;
    background-color: White;
    background-image: url(/Images/search.png);
    background-repeat: no-repeat;
    background-position: center center;
}

Wie entferne ich diese Grenze?

15
Timeless

border: 0 sollte ausreichen, aber wenn dies nicht der Fall ist, wirkt sich der Browser-Standardstil der Schaltfläche möglicherweise störend aus. Haben Sie versucht, appearance auf none zu setzen (z. B. -webkit-appearance: none)

38
Murray Smith
border-width:0px;
border:none;

Funktioniert gut.

12
Dipak

In meinem Fall verwende ich ein CSS-Framework, das box-shadow hinzufügt, also musste ich auch hinzufügen 

box-shadow: none;

Der komplette Ausschnitt ist also:

border: none; 
border-width: 0; 
box-shadow: none;
3
isapir

ihr Code sieht folgendermaßen aus jsfiddle.net/NTkGZ/

versuchen 

border:none;
2
Pawan Lakhara

Versuche dies 

#generic_search_button
{
    float: left;
    width: 24px; /*new width*/
    height: 24px; /*new width*/
    border: none !important; /* no border and override any inline styles*/
    margin-top: 7px;
    cursor: pointer;
    background-color: White;
    background-image: url(/Images/search.png);
    background-repeat: no-repeat;
    background-position: center center;
}

Ich denke, die Bildgröße könnte falsch sein 

1
basarat

verwenden Sie dies, ich hoffe diese Hilfe für Sie ........ Grenze: keine! wichtig; Hintergrundfarbe: transparent;

versuche dies

<div id="generic_search"><input type="search" onkeypress="return runScript(event)" /></div>
<button type="button" id="generic_search_button" /></button>
0
Vbiz Solutions

Es ist einfach

input {border:0;outline:0;}
input:focus {outline:none!important;}
0
Sina Kuhestani