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

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

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

No.2 ベストアンサー 回答者： rurino 回答日時： 2010/07/08 15:05

<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 回答日時： 2010/07/08 15:02

<style>

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