Question

我正在用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和输入框长300px，我无法看到我将在哪里输入，或者即使我可以实现它，因为使用.dialog中的参数似乎没有改变那个输入字段。有什么建议吗？

感谢阅读。

Answer 1

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

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

#menuBox .ui-dialog-content {
  font-size:20px;
  font-family:Tomoha;   
}
#menuBox .ui-dialog-content input {
    max-width: 320px;
    width: 300px;
}

Answer 2

你尝试过类似的事情吗？

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

或通过css：您需要使用!important来覆盖规则，即：

.dialog{
width:300px !important;
}

Answer 3

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

Jquery对话框，更改文本字段大小和字体

3 个答案: