使用javascript设置表单（选择），没有框架？

Question

任何人都知道如何使用javascript设置表单元素，但没有框架？ 找到了一个很好的jquery插件但我在我的网站上根本没有使用jquery所以我想尽可能避免使用它..

我想创建一个如下所示的选择框：

http://iforce.co.nz/i/qebncmoz.png

澄清一下，我想在选择框上设置图像/背景，以便我可以有一个自定义下拉箭头

Answer 1

您可以通过style属性设置元素样式（用camel case替换' - '），如下所示：

document.getElementById('elem').style.backgroundColor = 'red';

但最好将样式放在CSS中，而只是改变JavaScript中的类：

document.getElementById('elem').className = 'roundedCornerButton';

Answer 2

您必须使用其他元素。 ＆LT;选择＆GT;无法使用，因为除了背景颜色和字体外，您无法使用CSS进行非常好的样式设置。

我可以指出你的最佳方向是http://v2.easy-designs.net/articles/replaceSelect/ - 它似乎解释了如何做你想做的事情。

Answer 3

你不需要Javascript，纯CSS会这样做。

查看本文例如： Style Web Forms Using CSS

Answer 4

样式是通过CSS完成的，而不是JS。 JQuery用于Javascript中的快捷方式。

没有“替换”发生 - 标签仍然存在于场景之下但是CSS的良好使用使它看起来像那个图像。

Answer 5

有许多不需要框架的下拉菜单替换。尝试谷歌搜索javascript drop down。请参阅一个精美的例子here。

但考虑使用框架。在这些时候，20-50kb不再那么多了，即使是拨号线也不是那么多。框架为各种任务提供了许多小助手，你甚至可以链接到Google hosted versions，用户很可能已经缓存了它们。

Answer 6

如果表单元素具有关联的ID，则可以使用类似于以下内容的代码：

elem = document.getElementById(elemId);
elem.style.background = 'white';

我假设你想动态改变元素风格;不同的是，您不需要JavaScript来获得您想要的东西。

Answer 7

如果没有javascript，则无法在此处查看我的问题How to style a <select> dropdown with CSS only without JavaScript?

如果你不想使用任何框架，那么试试这个

http://v2.easy-designs.net/articles/replaceSelect/