1

我正在用 HTML 5 编写 Canvas 游戏，我想在画布上浮动一个 div，以便用户可以将他们的名字输入到一个框中，然后游戏将其捕获。

我已经完成了这项工作，但我不知道如何实际更改用户输入的文本框的大小、字体和长度。

我的JS如下：

$("#menuBox").dialog({
    resizable : false,
    position  : [30,30],
    minHeight : 100,
    minWidth  : 10,
    height    : 200,
    width     : 500
});

在身体里

<body>
  <div id="wrapper">
  <div id="container">
  <div id="menuBox" style="display:none">
    <form action="POST"> <input type="text" /></form>
  </div>

  </div>
</body>

和 CSS

#wrapper{
  position: relative;
  left:10px;
  top:10px;
}

#container{
  position: absolute;
  left: 0px;
  top: 0px;
  background-image: url("Main.jpg");
  height: 540px;
  width: 900px;
}

div.ui-dialog div.ui-widget-header { 
  border: none; 
  display: none;
}

.ui-dialog .ui-dialog-content  { 
   border: none; 
   padding: 0;
}

.ui-dialog {
   width: 500px;
   padding: 0;
}

所以这个想法是用户唯一看到的是长文本框，它只是出现在我格式化的画布环境中。

我是 JQuery 的新手（这就是为什么第一位仍然是非 JQuery 的原因），所以我什至不确定我想要什么是可能的。如果我想让字体大小为 20，Tomoha 和输入框长 300 像素，我看不到我会在哪里输入这个，或者即使我能做到这一点，因为使用 .dialog 中的参数似乎没有改变该输入字段。有什么建议吗？

谢谢阅读。

4

3 回答 3

3

如果问题只是更新对话框内容的样式，您可以提及特定的父 ID 或类，如下所示。

如果这没有解决，如果你能告诉我jQuery生成的对话框html代码，最好提供快速解决方案。

#menuBox .ui-dialog-content {
  font-size:20px;
  font-family:Tomoha;   
}
#menuBox .ui-dialog-content input {
    max-width: 320px;
    width: 300px;
}
于 2012-11-22T11:01:40.520 回答
1

你有没有尝试过类似的东西：

$(some_element).css({'width':'','font-size':''});

?

或通过 css：您需要使用!importantto ovveride 规则，即：

.dialog{
width:300px !important;
}
于 2012-11-22T10:37:35.193 回答
0

通用答案：使用浏览器的 DOM 检查器功能来可视化对话框的结构，然后使用这些知识构建所需的 CSS 选择器。我建议查看w3schools CSS 选择器参考。

于 2012-11-22T10:40:41.303 回答