CSS jQuery UI 样式的文本输入框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6802085/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI styled text input box
提问by Randomblue
jQuery UI makes buttons look nice with $('button').button();.
jQuery UI 使用$('button').button();.
Is there an equivalent for text input boxes?
文本输入框有等价物吗？
回答by Corin
There's nothing to stop you from doing $("input").button()... I like this:
没有什么可以阻止你做$("input").button()......我喜欢这样：
$('input:text, input:password')
.button()
.css({
'font' : 'inherit',
'color' : 'inherit',
'text-align' : 'left',
'outline' : 'none',
'cursor' : 'text'
});
回答by jedierikb
Add the class ui-corner-allto your input and post-style the input with CSS.
将该类添加ui-corner-all到您的输入并使用 CSS 对输入进行后期样式化。
$('input').addClass("ui-corner-all");
回答by Bernesto
I know this is old. But, if anyone is just looking to style their inputs to look more UIish, just add the following classes: $('input').addClass("ui-widget ui-widget-content ui-corner-all");
我知道这是旧的。但是，如果有人只是想让他们的输入看起来更 UI 风格，只需添加以下类：$('input').addClass("ui-widget ui-widget-content ui-corner-all");
You could just hard code the classes too.
您也可以对类进行硬编码。
回答by EliSherer
To sum things up I would like to add my implementation:
总而言之，我想添加我的实现：
$('input:text, input:password, input[type=email]').button()
.addClass('ui-textfield')
.off('mouseenter').off('mousedown').off('keydown');
The CSS would be:
CSS 将是：
.ui-textfield {
font: inherit;
color: inherit;
background: none;
text-align: inherit;
outline: none;
cursor: text;
}
See it here: http://jsfiddle.net/UXdLQ/1544/
在这里看到它：http: //jsfiddle.net/UXdLQ/1544/
回答by Adam Mester
I had the same problem, I came up with the following solution. Use these classes on your input field:
我遇到了同样的问题，我想出了以下解决方案。在您的输入字段上使用这些类：
ui-widget ui-state-default ui-corner-all
ui-widget ui-state-default ui-corner-all
You may modify the padding - f.e. if you selectelements on your site - to be unified.
您可以修改填充 - 如果select您网站上的元素为fe - 以统一。
jQuery UI v1.11.4
jQuery UI v1.11.4
回答by RatDon
also add a .off('keydown')to Corin'sanswer to prevent the box from turning white when enter or space is pressed.
还要.off('keydown')在Corin 的答案中添加一个，以防止在按下输入或空格时框变白。
回答by karthiks
The example in your question cites jQuery UI's Button widget. The idea of this widget is to have a range of options including ease of theme-ing. There is a widget for input boxes too. Some of them that I'm aware of are as below:
您问题中的示例引用了 jQuery UI 的 Button 小部件。这个小部件的想法是提供一系列选项，包括易于主题化。输入框也有一个小部件。其中一些我知道如下：
- Auto-Complete Widget
- Default Text Pluginfor input-box
- Text Limit Pluginfor input-box / text-area
There are many such plugins if not for widgets. You can always browse/search through at the search box available in the page http://plugins.jquery.com/
如果不是小部件，有很多这样的插件。您始终可以在http://plugins.jquery.com/页面中提供的搜索框中浏览/搜索
回答by Morvael
I liked the idea of simply adding the classes so much I wrote it as a jQuery plugin. Benifit here is if at some poitn in the future jQueryUI do a version it will most likely use the same format, so converting will be easy.
我非常喜欢简单地添加类的想法，因此我将其编写为 jQuery 插件。这里的好处是，如果在未来的某个时间点 jQueryUI 做一个版本，它很可能会使用相同的格式，所以转换会很容易。
(function($)
{
$.fn.input = function ()
{
return this.each(function ()
{
$(this).addClass("ui-widget ui-widget-content ui-corner-all ui-button");
});
}
})(jQuery);
Call it like:
像这样称呼它：
$('input, password').input();
If you wanted to add hover effects etc, just add the logic into
如果您想添加悬停效果等，只需将逻辑添加到
return this.each(function ()
{
// display logic
});
EDIT: Added in additional class "ui-button" to make them the same height / padding etc as .button()
编辑：在附加类“ui-button”中添加，使它们与 .button() 具有相同的高度/填充等
EDIT 2: This turned out to be such a good idea I've carried on, adding a version for labels, and allowing custom CSS to be passed in.
编辑 2：结果证明这是一个好主意，我一直在坚持，为标签添加一个版本，并允许传入自定义 CSS。
// some styling for inputs
(function($)
{
$.fn.input = function (css)
{
if (!css)
css = {};
return this.each(function ()
{
$(this).addClass("ui-widget ui-widget-content ui-corner-all ui-button");
$(this).css(css);
});
}
})(jQuery);
// and labels
(function ($)
{
$.fn.label = function (css)
{
if (!css)
css = {};
return this.each(function ()
{
$(this).addClass("ui-widget ui-button");
$(this).css(css);
});
}
})(jQuery);
Then too style your inputs / labels. The class / styles of these don't actually need to exist anywhere.
然后也为您的输入/标签设置样式。这些类/样式实际上不需要存在于任何地方。
$(".client-input").input();
$(".client-label").label({ "min-width": "125px", "text-align": "right" });
Outputs UI like this - with inputs and labels matching the style of the button. (Select's need work)
像这样输出 UI - 输入和标签与按钮的样式相匹配。（选择需要工作）
回答by blah
To have the same corners/font/padding/spacing as button, but without the button interactions (hover, active etc.)
具有与按钮相同的角/字体/填充/间距，但没有按钮交互（悬停、活动等）
HTML: input type="text" class="ui-button ui-widget ui-corner-all"
HTML: input type="text" class="ui-button ui-widget ui-corner-all"
if you want to align text add another custom class
如果要对齐文本添加另一个自定义类
CSS: .textfield { text-align:left; }
CSS: .textfield { text-align:left; }
HTML: input type="text" class="ui-button ui-widget ui-corner-all textfield"
HTML: input type="text" class="ui-button ui-widget ui-corner-all textfield"
