Cum se face un buton de trimitere de intrare cu aspect plat? (Programare, Html, Css)

Karl Bao a intrebat.

Aici am un buton de trimitere:

<input type="submit" value="submit" />

Și vreau să adaug câteva stiluri suplimentare pentru a face un aspect plat:

input {
    border: 0;
    background: none;
    -webkit-appearance: none;
}

Acesta este modul în care arată după aceea:

Cu toate acestea, dacă vă uitați cu atenție, există încă o margine în partea de sus a butonului de trimitere……Există vreo modalitate de a elimina suprafața scufundată sau ridicată și de a face un aspect plat simplu?

Comentarii

  • În html/css standard, codul dvs. ar face ca butonul să fie plat. Cred că există și alte reguli aplicate la această intrare. –  > Por Ianis.
  • Te rog să adaugi o violină ca să putem verifica mai bine. –  > Por shadeed9.
  • sunt alte stiluri care îl suprascriu? –  > Por Miguel Mota.
4 răspunsuri
HalfWebDev

Va trebui să setezi border, box-shadow și background la 0/none pentru a elimina orice aspect cenușiu așa cum se vede pe buton. Apoi, pentru a elimina colțurile rotunjite, setați border-radius la 0px.

Regulile sunt :

input[type="submit"]  
/* Or better yet try giving an ID or class if possible*/
{
 border: 0;
 background: none;
 box-shadow: none;
 border-radius: 0px;
}

Itamar Gronich

outline: none; ar fi prima mea presupunere.

Și, de asemenea, probabil că ați dori să eliminați :focus state și :hover state ca atare

input[type="submit"]:focus {
background:none;
outline: none;
border:none;
}


input[type="submit"]:hover {
background: none;
border: none;
outline: none;
box-shadow: none;
}

acest lucru face ca atunci când este apăsat, nu va avea un contur accentuat.

Dacă nu funcționează, încercați să eliminați alte stiluri, cum ar fi box-shadow:none;, , border-radius:none;.

shadeed9

Văd că colțurile butoanelor sunt rotunjite. Poate că acest lucru este cauzat de alte stiluri care îl afectează. Încercați să eliminați border-radius astfel:

input {
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-appearance: none;
}

Dacă asta nu a rezolvat problema, atunci trebuie să verificați ce stil adaugă marginea de sus. Puteți încerca să utilizați CSS !important cu declarația border (nu este recomandată):

input {
    border: 0 !important;
    border-radius: 0;
    background: none;
    -webkit-appearance: none;
}

zer00ne
input { 
  border: 0 none hlsa(0,0%,0%,0);
  outline: 0 none hlsa(0,0%,0%,0);
  box-shadow: none;
  background: none;
  -webkit-appearance: none;
}

Chiar dacă outline nu este o opțiune implicită a browserului (AFAIK), în Bootstrap (dacă îl folosești sau un alt framework similar) outline se aplică chiar dacă nu apare în stilul calculat. Încă mai caut întrebarea referitoare la asta. Btw, nu am adăugat border-radius pentru că m-am gândit că s-ar putea să vrei colțuri rotunjite și nu ar trebui să fie o problemă.

Tags:,