• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Konfiguracja input type="text"

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
611 wizyt
pytanie zadane 11 kwietnia 2021 w HTML i CSS przez Nearr Obywatel (1,890 p.)

Wtam,
Robię ustawienia do gry, i chcę zrobić zakładkę sterowanie.

Na zdjęciu można zobaczyć kreskę, która pojawia się i znika po kliknięciu na input text.

Na tym zdjęciu nie widać tej kreski pomimo kliknięcia na pole tekstowe

Czy jest możliwość by ta kreska się w ogóle nie pojawiała?

2 odpowiedzi

+1 głos
odpowiedź 11 kwietnia 2021 przez mb-dir Mądrala (6,710 p.)

Witaj

Chodzi Ci o taki efekt? Jeśli tak to masz już rozwiązanie

komentarz 11 kwietnia 2021 przez Nearr Obywatel (1,890 p.)
Dokładnie tak, dziękuję :)
1
komentarz 11 kwietnia 2021 przez SzkolnyAdmin Szeryf (89,030 p.)
Efekt ciekawy (i stąd plusik), ale IMO mało użyteczny dla usera - w końcu dobrze wiedzieć, gdzie się kliknęło.
komentarz 11 kwietnia 2021 przez Nearr Obywatel (1,890 p.)
dlatego ustawiłem :focus, przez co po klliknięciu zmienia kolor na jaśniejszy
komentarz 11 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)
A co da zmiana koloru inputa na focus, skoro przy niewidocznym kursorze user nie wie, gdzie ten kursor się znajduje? Załóżmy, że user chce zmienić tekst w środku zdania - skąd ma wiedzieć, gdzie ten kursor jest jeśli np. użyje strzałek na klawiaturze zamiast myszki? Ma liczyć ile razy wciska klawisz strzałki? To dość niewygodne.
komentarz 11 kwietnia 2021 przez Nearr Obywatel (1,890 p.)
To nie będzie pole na zdanie. To będą ustawienia sterowania, czyli max 1 litera
komentarz 11 kwietnia 2021 przez Nearr Obywatel (1,890 p.)

Przed

Po

Nie znaczna zmiana, ale user będzie wiedział o co chodzi. Plus jeszcze ustawiłem cursor: pointer;

komentarz 11 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Skoro to ma być jakaś pojedyncza litera, przeznaczona do konfiguracji, to może lepiej użyć tutaj listy opcji w formie selecta, albo radioboxów?

Plus jeszcze ustawiłem cursor: pointer;

W jaki sposób to niweluje problem z widocznością kursora w inpucie?

komentarz 11 kwietnia 2021 przez Nearr Obywatel (1,890 p.)
Chodzi mi to, że user będzie mógł sobie wybrać dowolną literę lub liczbę jaką będzie chciał.
np. gra League of Legends. user może sobie wybrać pod jakim przyciskiem chce użyć umiejętności. Nie wygodne by było wybierać z listy jaki przycisk chcesz przypisać
komentarz 11 kwietnia 2021 przez Nearr Obywatel (1,890 p.)

przykład

komentarz 11 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)
Nie rozumiem jaki problem powoduje migający kursor w inpucie. Może zamiast rezygnować z kursora, pokaż okienko, gdzie będzie można wpisać znak dla danej opcji klawiszem z możliwością nadpisywania go? Coś takiego jak np. tutaj: https://keycode.info/
komentarz 11 kwietnia 2021 przez Nearr Obywatel (1,890 p.)
Nie rozumiesz o co mi chodzi..
0 głosów
odpowiedź 11 kwietnia 2021 przez SzkolnyAdmin Szeryf (89,030 p.)

Daj kod. Czy masz ustawiony placeholder dla pola?

https://developer.mozilla.org/pl/docs/Web/HTML/Element/Input

komentarz 11 kwietnia 2021 przez Nearr Obywatel (1,890 p.)
<input type="url" name="Skin-URL" maxlength="31" placeholder="Skin URL" placeholder="#ffffff;" />
                    <input type="text" name="Nickname" maxlength="20" placeholder="Nickname" />
                    <input type="text" name="Tag" maxlength="20" placeholder="Tag" />
input[name=Skin-URL] {
    background-color: #111111;
    color: #cecece;
    outline: 1px;
    border: 1px solid #080808;
    border-radius: 2px;
    transform: translate(4.5%, 340%);
    width: 301px;
    height: 20px;
    padding: 5px;
    opacity: 0.9;
  }
  
  input[name=Nickname] {
    background-color: #111111;
    color: #cecece;
    outline: 1px;
    border: 1px solid #080808;
    border-radius: 2px;
    transform: translate(7.5%, 110%);
    width: 175px;
    height: 20px;
    padding: 5px;
    opacity: 0.9;
  }
  
  input[name=Tag] {
    background-color: #111111;
    color: #cecece;
    outline: 1px;
    border: 1px solid #080808;
    border-radius: 2px;
    transform: translate(21%, 110%);
    width: 100px;
    height: 20px;
    padding: 5px;
    opacity: 0.9;
  }

Normalnie mam ustawiony placeholder, ale na potrzeby pytania musiałem usunąć go, ponieważ na zdjęciu nie było by widać tej kreski

Podobne pytania

0 głosów
1 odpowiedź 782 wizyt
0 głosów
1 odpowiedź 474 wizyt
pytanie zadane 12 grudnia 2016 w JavaScript przez niezalogowany
0 głosów
1 odpowiedź 2,240 wizyt
pytanie zadane 1 lutego 2018 w HTML i CSS przez Zackerrr Początkujący (450 p.)

93,182 zapytań

142,196 odpowiedzi

322,002 komentarzy

62,513 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 2127p. - dia-Chann
  2. 2092p. - Łukasz Piwowar
  3. 2079p. - Łukasz Eckert
  4. 2037p. - Tomasz Bielak
  5. 2006p. - rucin93
  6. 2005p. - Łukasz Siedlecki
  7. 1964p. - CC PL
  8. 1835p. - Adrian Wieprzkowicz
  9. 1785p. - Michal Drewniak
  10. 1744p. - rafalszastok
  11. 1684p. - Mikbac
  12. 1624p. - Anonim 3619784
  13. 1520p. - Marcin Putra
  14. 1480p. - ssynowiec
  15. 1365p. - Dawid128
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...