【问题标题】:Add an SVG within a Number Input在数字输入中添加 SVG
【发布时间】:2023-03-03 19:30:01
【问题描述】:

我有一个数字输入表单域。

<input type="number" name="" v-model.lazy="userResponse" placeholder="Enter value here" class="bg-white border-gray-300 border-2 text-gray-600 shadow-md px-6 py-4 rounded-lg my-2" :class="{ 'border-teal-500 border-2' : isCorrect }" :disabled="showFeedbackView">

它给了我这个:

只要 isCorrect 值为 true,我想在值旁边添加一个 svg 复选标记图标。

有没有办法做到这一点?

【问题讨论】:

    标签: html css forms vue.js


    【解决方案1】:

    使用以下规则添加类is-correct

    .is-correct{
        background-image: url(/path/to/success.svg);
    }
    

    并像这样使用它:

    :class="{ 'border-teal-500 border-2 is-correct' : isCorrect }"
    

    我的答案来自github new repo page

    【讨论】:

    • 啊,是的,我应该这样做。我只是将它嵌入到一个 div 中,并添加了一些绝对位置的 SVG。
    • 是的,将输入和 svg 放在具有相对位置的容器中,然后将 svg 与绝对位置放在一起,然后使用正确的属性
    猜你喜欢
    • 2017-04-10
    • 2016-07-20
    • 1970-01-01
    • 2014-01-20
    • 1970-01-01
    • 2012-02-27
    • 1970-01-01
    • 1970-01-01
    • 2016-07-13
    相关资源
    最近更新 更多