HTML/CSS：如何获得带有单边框的框？答案

【问题标题】：HTML/CSS: How can I get a box with a single border?HTML/CSS：如何获得带有单边框的框？
【发布时间】：2009-10-26 22:59:28
【问题描述】：

我需要一个被灰色框包围的简单列表（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>

【问题讨论】：

border: 1px solid gray 到底有什么问题？
其实运行你的示例html后，我看不出代码和你的问题有什么关系
天啊！这是我几天前发布的回复的翻录版本：stackoverflow.com/questions/1549359/… 看看 $() 函数、样式和 id 的 LOL！

标签： javascript html css

【解决方案1】：

您正在模仿 Prototype 框架，但可能会从中得到更多。首先，如果您将单击/模糊事件设置为抽象事件，则代码会更清晰且更兼容跨浏览器。

如果您要显示/隐藏元素，请使用

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

如果您要获取表单值，请使用：

$F('elementID');

或设置表单值：

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

我无法真正理解您要做什么 - 您的问题是：“3 行文本”并不能真正反映您发布的代码...

【讨论】：

【解决方案2】：

<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>

【讨论】：

【解决方案3】：

border: 1px solid black;

【讨论】：

【解决方案4】：

我不太清楚你要传输的文本值是什么意思，但是一个带有单个灰色边框的框应该只是

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

我打字的时间太长了，我只会将你的问题的逻辑部分推荐给亚当的答案。

【讨论】：