html の select タグで表示するリストが画面外にいった場合に画面内に移動させる方法


以下の画像のように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]

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




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]




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]

