Konfiguracja input type="text"

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

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

Pokaż 6 poprzednich komentarzy

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..

odpowiedź 11 kwietnia 2021 przez SzkolnyAdmin Szeryf (86,360 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