Jak mogę uczynić to wejście przezroczystym?Czy istnieje czysty sposób CSS, aby dane wejściowe były przezroczyste?
<input type="text" class="foo">
Próbowałem tego, ale to nie działa.
background:transparent url(../img/transpSmall.png) repeat scroll 0 0;
input[type="text"]
{
background: transparent;
border: none;
}
Nikt nie wie nawet, że tam jest.
To łamie IE7 – Metropolis
@Metropolis z przyjemnością donieść, że nikt nie dba o to na 2016 – Denis
Jak powiedział Denis, tylko ludzie w Chinach dbają o kompatybilność IE7 w dzisiejszych czasach. –
lubię robić to
input[type="text"]
{
background: rgba(0, 0, 0, 0);
border: none;
outline: none;
}
Ustawienie właściwości outline do none zatrzymuje przeglądarkę od podkreślając pole gdy kursor przechodzi
dwóch metod opisanych wcześniej nie są na tyle dzisiaj. I personnally użyć:
input[type="text"]{
background-color: transparent;
border: 0px;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
width:5px;
color:transparent;
cursor:default;
}
Usuwa również cień ustawiony na niektórych przeglądarkach, ukryć tekst, który mógłby być wejście i sprawiają, że zachowuje się tak, jakby kursora wejście nie było.
Możesz również ustawić szerokość na 0px.
Ustawiłem krycie na 0. Dzięki temu zniknęło, ale nadal działa po kliknięciu.
Zgodnie z ogólną zasadą nigdy nie należy całkowicie usuwać stylu outline lub :focus.
https://a11yproject.com/posts/never-remove-css-outlines
... używając
outline: nonebez odpowiednich fallbacks sprawia witryna znacznie mniej dostępne dla każdego użytkownika tylko klawiatury, nie tylko tych z wadami wzroku. Upewnij się, że elementy interaktywne są zawsze widoczną oznaką skupienia.
Ustaw wejście o tym samym kolorze, co znajduje się za nim. –
Czy na pewno chcesz nie tylko typ wejścia = "ukryty"? –
Może to być spekulacja spamem, która byłaby uzasadniona, chociaż posiadanie czegoś widocznego, ale wciąż możliwego do ogniskowania, nie jest świetnym pomysłem. – Kzqai