テキストボックスの様に文字の周り（枠）をへこませてみせたい

質問

テキストボックスの様に文字の周り（枠）をへこませてみせたい

<input type="text" name="field1" value="文字" />のタグを使った時のように
文字の周り（枠）がへこんで見えるように装飾したいのですがどうすればいいでしょうか
どなたか教えてください。

回答No.2

rurino · ベストアンサー

<span style="border-width: 1px; border-style: solid; border-color: #666 #ccc #ccc #666; padding: 2px; ">文字文字文字文字</span>

<span style="border: 1px solid #ccc; padding: 1px; "><span style="border-width: 1px; border-style: solid; border-color: #ccc #efefef #efefef #ccc; padding: 2px; ">文字文字文字文字</span></span>

みたいな感じですかね…

ポイントとしては

・上と左の罫線を濃い目
・右と下の罫線を上左よりちょっと薄め

で罫線をつけるといいと思います。

サイトの状況に応じて、このまま使ってもいいし
外部スタイルシートにクラスを設けて書いてもいいと思います。

回答No.1

yambejp

<style>
div.hoge{
width:100px;
border:2px inset;
}
</style>
<input type="text" name="field1" value="文字" />
<div class="hoge">文字</div>