Question

我希望将输入元素看起来就像一个锚链接。此外，它应该看起来像一个x-editable插件应用于它的链接。我的尝试显示如下。我的难点是下划线延伸到文本之外，文本宽度并不总是相同。理想情况下，输入宽度始终是文本的宽度（JavaScript解决方案是可以的）。我也有点击之前/之后颜色的问题，但是假设我可以从页面上的其他链接中删除它。

.inputLink {
    border: none;
    outline: none;
    background-color: transparent;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    color:#0000ff;
    border-bottom: 1px dashed #0088cc;
    text-decoration: none;
    /* width:75px; */
}

为什么我要这样做？

我需要通过单击当前日期来启动jQuery datepicker（实际上是timepicker）。我已经看过几个解决方案，但相信我在下面发布的解决方案（以及http://jsbin.com/tadaqomure/1/）更清晰，只要我能找出输入的CSS。如果您觉得我应该采用不同的方式，请提供评论。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  

        <style type="text/css">
            .inputLink {
                border: none;
                outline: none;
                background-color: transparent;
                font-family: inherit;
                font-size: inherit;
                cursor: pointer;
                color:#0000ff;
                border-bottom: 1px dashed #0088cc;
                text-decoration: none;
                /* width:75px; */
            }
        </style>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.min.js" type="text/javascript"></script>
        <link href= "https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.css" rel="stylesheet">
        <link href= "https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/jqueryui-editable/css/jqueryui-editable.css" rel="stylesheet">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/jqueryui-editable/js/jqueryui-editable.js" type="text/javascript"></script>

        <script type="text/javascript"> 
            $(function(){
                $('#text').editable();
                $("#datetime").datetimepicker();
            });
        </script>
    </head>

    <body>
        <div>
            <span>Normal Link:</span>
            <a href="#" id="text">test</a>
        </div>

        <div>
            <span>Datetime Fake Link:</span>
            <input class="inputLink" id="datetime" type="text" readonly value="1/05/1984" />
        </div>
    </body> 
</html>

使输入看起来像锚链接（没有输入的AKA jQueryUI datepicker）

0 个答案: