入力フィールドに疑問符の送信ボタンを配置します

Question

私は入力フィールドとcssスタイリングのために疑問符のように見える送信ボタンを持っています。

どのように私はこのような入力フィールド内の疑問符を配置することができます：これは、現在のように見えるものである

HTML

<div class="div"> 
    <form method="post"> 
    <input type="text" class="input"> 
    <input type="submit" value="?" class="submit"> 
    </form> 
</div> 

CSS

.div { 
    position: relative; 
    top: 50%; 
    transform: translateY(50%); 
} 

.input { 
    display: block; 
    margin: 0 auto; 
    width: 50%; 
} 

.submit { 
    background: none; 
    border: none; 
} 

JsFiddle：あなたは、いくつかのCSSを入力フィールドに背景画像として例えば疑問符を使用することができhttps://jsfiddle.net/TheCodesee/8h72tjcL/2/

Answer 1

：

.form-input { 
    padding-right: 4rem; 
    background-image: url(your image); 
    background-repeat: no-repeat; 
    background-position: center right 1rem; 
    background-size: 2rem 2rem; 
} 

あなたの画像サイズに応じて数字を調整する必要がありますもちろん。送信ボタンがまだ存在する可能性がありますが、非表示にしたい場合は（visibilityまたはdisplay）したがって、フォームを送信するためにenterキーを押しても使用できます。 入力ぼかしでフォームを自動的に送信することもできます。

このように、ボタン自体を移動させないようにすることができます。

Answer 2

投稿入力にposition: absoluteを使用してください。

.div { 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(50%); 
 
    width: 50%; 
 
    margin: 0 auto; 
 
} 
 

 
.input { 
 
    display: block; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
} 
 

 
.submit { 
 
    border: none; 
 
    background: none; 
 
    outline: none; 
 
    position: absolute; 
 
    top: 2px; 
 
    right: 0px; 
 
}

<div class="div"> 
 
    <form method="post"> 
 
    <input type="text" class="input"> 
 
    <input type="submit" value="?" class="submit"> 
 
    </form> 
 
</div>