Konfiguracja input type="text"

Question

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?

Answer 1

Witaj

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

Comments

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?

---

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ć

---

przykład

---

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/

---

Nie rozumiesz o co mi chodzi..

Answer 2

Daj kod. Czy masz ustawiony placeholder dla pola?

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

Comments

<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