css - 如何为日期输入字段设置自定义图标

Question

我正在尝试在此img中为日期输入字段设置自定义图标。虽然我在按钮上创建了自定义图标，但我无法为日期字段创建一个。

<div id="send-date" class="transaction-details" data-role="fieldcontain" data-theme="gr">
   <label for="date">Send on</label>
   <input type="date" name="date" id="date" value="" placeholder="" data-icon="date" data-iconpos="right" />
</div><!-- /send-date -->

还有其他方法吗？

链接到代码 链接到自定义图标

Answer 1

我为您构建了一个示例：http: //jsfiddle.net/Gajotres/WFz37/

您需要使用用于包装用于列表视图过滤的输入字段的相同 div 包装输入。之后应用这个java脚本：

$('input[type="text"]').removeClass('ui-input-text ui-corner-all ui-shadow-inset').addClass('ui-input-text');
$('#custom-input-wrapper').removeClass('ui-icon-searchfield').addClass('ui-custom-icon');

唯一的要求是 16x16 图像，但我认为您可以使用更大的图像，在这种情况下使用 css 来创建所需的样式。