テーブルのセルを押すとするっと1から9の数値が出てきて選択した数値が入力されるようにしたいです。

格子状のtableタグで作った表に数値を入れる物を作ったのですが、簡単に数値を選択していれる方法はないでしょうか？
テーブルのセルを押すとするっと1から9の数値が出てきて選択した数値が入力されるようにしたいです。

現在はtdにinput要素を入れて数値を入力しています。
typeにnumberと入れています。

selectタグでプルダウンメニューをtdに入れたのですが、selectタグにデフォルトの余計なcssが一杯当たっているせいか、selectタグのサイズが、input要素の数値の場合より大きいようでテーブルが崩れます。
下記を入れても変わりません。
appearance: none;

また、余計な余白や四角などが邪魔です。

なにか良い方法はないでしょうか？

HTMLを追加します。

～
<tr>
  <td><input type="text" value="5"></td>
  <td><input type="text" value="4"></td>
  <td><input type="text" value=""></td>←ここを閲覧者がクリックした時に1から9の選択肢が出てきて、選択するとその数値が入力されるようにしたい。
</tr>
～

行動規範の内容に同意します

回答2件

制限がいろいろありますがdatalistを使うとか

HTML
1<input type="text" value="" list="num">
2<input type="text" value="" list="num">
3<input type="text" value="" list="num">
4<datalist id="num">
5<option value="1">
6<option value="2">
7<option value="3">
8<option value="4">
9<option value="5">
10<option value="6">
11<option value="7">
12<option value="8">
13<option value="9">
14</datalist>

ただしそのままでは使いにくいのでjsなどと絡める必要があるかもしれません

投稿2018/10/24 00:51

yambejp

総合スコア114968

退会済みユーザー

2018/10/24 01:42

確かにかなり近づいたのですが、右側に出る▼のスペースはやはり残ってしまうのですね。 PCサイズは問題ないのですが、スマホサイズだと横幅が小さいので、この▼のスペースを上か下に持っていくか無くしてしまうことはできないでしょうか？

退会済みユーザー

2018/10/24 01:43

input { -webkit-appearance: textfield; background-color: white; -webkit-rtl-ordering: logical; cursor: text; padding: 1px; border-width: 2px; border-style: inset; border-color: initial; border-image: initial; } user agent stylesheet input, textarea, select, button { text-rendering: auto; color: initial; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: start; margin: 0em; font: 400 13.3333px Arial; } こんなにあるのですが、この中にありそうに思えません。

x_x

2018/10/24 03:11

Chromeならこうでは？ input[list]::-webkit-calendar-picker-indicator { display: none; }

退会済みユーザー

2018/10/24 06:09

このように https://codepen.io/anon/pen/xyOQjm 確かに一度目の選択はイメージ通りいったのですが、二度目からは、数値が全て出てきません。これはこのやり方では解決できないのでしょうか？

yambejp

2018/10/24 07:20

> 二度目からは、数値が全て出てきません。 datalistは前方一致の検索なので、数値が選ばれているとヒットしません数値をクリアするか、別の方法を検討ください

退会済みユーザー

2018/10/24 09:30

こちらが最も理想に近いのですが、横の▼をなくし数値だけにはできないのでしょうか？縦にするでもいいです。スマホサイズで厳しいので

行動規範の内容に同意します