HTML / CSS: как я могу получить прямоугольник с одной рамкой?

Question

Мне нужен простой список (3 строки текста), окруженный серой рамкой. Я знаю, что мне нужно реализовать размытие вместо кнопки «закрыть».
Вот что у меня пока ...
Я не могу отправить текстовые значения для передачи.
Помогите!

<script> function $(id) { return document.getElementById(id); } </script>
<input name="media" id="media" type="text" />
<input type="button" value="..." 
    onclick="$('keypad').style.display='inline-block';"/>
<div id="keypad" style="display:none; background:#CCC; vertical-align:top;">
<input type="text" value="Canvas" onclick="$('media').value='Canvas';"/><br/>
<input type="button" value="Done" onclick="$('keypad').style.display='none'"/>
</div>

Answer 1

Вы имитируете фреймворк Prototype, но можете извлечь из него гораздо больше. Во-первых, если вы настроите события клика / размытия как абстрагированные события, код будет более понятным и более совместимым с браузерами.

Если вы показываете / скрываете элемент, используйте

$('elementID').show();
$('elementID').hide();

Если вы получаете значение формы, используйте:

$F('elementID');

или установка значения формы:

$F('elementID') = 'newValue';

Я не могу понять, что вы пытаетесь сделать - ваш вопрос: «3 строки текста» на самом деле не отражают код, который вы опубликовали ...

Answer 2

Я не совсем уверен, что вы имеете в виду для получения текстовых значений для передачи, но поле с одной серой рамкой должно быть просто

<div style="border: 1px solid #AAAAAA;">
<!-- your list here -->
</div>

Я потратил слишком много времени, печатая, я просто отсылаю вас к ответу Адама для логической части вашего вопроса.

Answer 3

border: 1px solid black;

Answer 4

<script> function $(id) { return document.getElementById(id); } </script>
<input name="media" id="media" type="text" />
<input type="button" value="..." onclick="$('keypad').style.display='inline-block';"/>
<div id="keypad" onmouseout="$('keypad').style.display='none'" style="display:none; background:#CCC; vertical-align:top;border:1px solid grey;">
<input type="text" value="Canvas" onclick="$('media').value = $('mediain').value;" id="mediain" onblur="$('keypad').style.display='none'"/><br/>
</div>