入力フィールドの幅からオートコンプリートボックスサイズを外す

Question

Googleのオートコンプリートボックスは、それが属する入力フィールドと常に同じ幅になっています。

<input type="text" id="autoTest"> 

#autoTest{ 
    width: 40px; 
} 

結果：

そして

}

結果：

入力フィールドの幅を変更することなく、より大きな幅を実現する方法はありますか。これは私の場合にはオプションではないからです。また、ユーザーが選択した後で、入力フィールド内に表示されているストリート名全体を取得することは、ユーザーにとって重要ではありません。

私はきれいなソリューションをありがたく思っていますが、そうでない場合は回避策も講じます。

Answer 1

ドロップダウンにカスタムスタイルを適用するセレクタ.pac-containerを使用します。

function initialize() { 
 

 
    new google.maps.places.Autocomplete(document.getElementById('autoTest')) 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

.pac-container { 
 
    width: 400px !important; 
 
} 
 
#autoTest { 
 
    width: 40px; 
 
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places"> 
 
</script> 
 
<input id="autoTest"/>