可変ウィンドウでボタンのサイズを変えずにテキストフォームだけ伸び縮みするようにする

Yukimi Sato 1,046views 更新:2014年3月27日

HTML

<form>
<input type="text" class="text" placeholder="メッセージを入力" />
<input type="submit" class="btn" id="submitMessage" value="送信" />
</form>

CSS

form{
position:relative;
padding-right:50px;
}

.text{
width:100%;
}

.btn{
position:absolute;
bottom:0;
right:0;
width:45px;
}

formを基準としてボタンを浮かせています。
その上でformにボタン幅分のpaddingをrightに指定。
テキストフォームは幅100%を指定しておけば完成です。

paddingやmargin、widthなどはお好みの数値を入れてください。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません