body { background-color: pink; } form.uri { margin: 0; } /* --- ボックス --- */ form.uri div { width: 388px; /* ボックスの幅 */ padding: 1px 0; /* ボックスのパディング(上下、左右) */ background-color: #ffffff; /* ボックスの背景色 */ border: 1px #808080 solid; /* ボックスの境界線 */ } /* --- テキストボックス --- */ form.uri input.textBox { width: 298px; /* テキストボックスの幅 */ margin: 0 4px 0 5px; /* テキストボックスのマージン(上右下左) */ padding: 0; background-color: #ffffff; /* テキストボックスの背景色 */ border: none; /* テキストボックスの境界線(なし) */ color: #000000; } form.uri input.btn { width: 80px; /* ボタンの幅 */ display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #f7f7f7; border-left: solid 6px #ff7c5c;/*左線*/ color: #ff7c5c;/*文字色*/ font-weight: bold; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); } .btn:active { box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1); transform: translateY(2px); }
nanaのアドレス短縮サービス