94780


以下の画像のようにselectタグでリスト表示すると画面外（ブラウザの外）にリストが表示されてしまいます。  
[![画面外](https://i.stack.imgur.com/VeHWl.png)](https://i.stack.imgur.com/VeHWl.png)

そこで質問なのですが、  
(1) 以下の画像のように画面内に自動で移動させることは可能でしょうか？  
(2) 以下の画像のようにselectタグ右側起点でリストを表示するようにすることは可能でしょうか？

[![画像の説明をここに入力](https://i.stack.imgur.com/DXcO0.png)](https://i.stack.imgur.com/DXcO0.png)

ソースは以下の通りです。

[code]

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <style>
        select {
          width: 100px;
        }
        .container {
          text-align: right;
        }
      </style>
    </head>
    <body>
      <div class="container">
        <select id="my-select">
          <option value="1">Option 1111111111111111</option>
          <option value="2">Option 2222222222222222</option>
          <option value="3">Option 3333333333333333</option>
          <option value="4">Option 4444444444444444</option>
        </select>
      </div>
    </body>
    </html>
[/code]

以上、よろしくお願いします。


CC BY-SA 4.0
2023-05-03T13:44:16.803
94734
2023-05-08T02:33:14.700
2023-05-03T13:59:42.010
13909
13909
question
html css
html の select タグで表示するリストが画面外にいった場合に画面内に移動させる方法


SELECTタグにdir="rtl"を付けてあげてみてください。

[code]

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <style>
        select {
          width: 100px;
        }
        .container {
          text-align: right;
        }
      </style>
    </head>
    <body>
      <div class="container">
        <select id="my-select" dir="rtl">
          <option value="1">Option 1111111111111111</option>
          <option value="2">Option 2222222222222222</option>
          <option value="3">Option 3333333333333333</option>
          <option value="4">Option 4444444444444444</option>
        </select>
      </div>
    </body>
    </html>
[/code]


CC BY-SA 4.0
2023-05-08T02:25:28.257
94780
2023-05-08T02:33:14.700
2023-05-08T02:33:14.700
29826
58081
94734
answer