Question

我能够实现自定义复选框，但我卡住了显示默认的灰色背景和动态蓝线。

在第一个例子中，只有一个点，蓝色线从开头到点显示。在第二个中，蓝线应出现在它们之间。

我很感激任何想法和帮助。谢谢。

＆＃13;

DECLARE @filter NVARCHAR(1000) = '10-25,100-125,500,200-300';

;WITH CTE_RangeComparisons
AS
(
    -- Use string split function to get input ranges
    SELECT      [value]
                ,(
                    -- If string contain the ‘-‘ character then we know we have a high limit and low limit specified otherwise we assume a single value.
                    CASE 
                        WHEN CHARINDEX('-',[value])  > 0 THEN CAST(LEFT([value], (CHARINDEX('-',[value]) - 1)) AS FLOAT) 
                        ELSE CAST([value] AS FLOAT)
                    END
                 ) AS LowRange
                ,(
                    CASE 
                        WHEN CHARINDEX('-',[value])  > 0 THEN CAST(RIGHT([value], LEN([value]) - (CHARINDEX('-',[value]))) AS FLOAT)
                        ELSE CAST([value] AS FLOAT)
                    END
                ) AS HighRange
    FROM        string_split(@filter, ',')
)
SELECT      D.*
FROM        [YourDataTable] D
CROSS APPLY (
                -- Use cross apply to filter data on the ranges identified.
                SELECT  1 [Match] -- Selected values here does not matter we are only interested in filtering the parent table.
                FROM    CTE_RangeComparisons R
                WHERE   D.InvoiceTotal >= R.LowRange AND D.InvoiceTotal <= R.HighRange
            ) Ranges

＆＃13;

.wrapper {
width: 236px;

}

.container {
  display: inline-block;
  position: relative;
  margin-left: 12px; 
  margin-right: 12px;
  cursor: pointer;
  padding: 10px;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.container input {
  position: absolute;
  opacity: 0;
}

.checkmark {
  position: absolute;
  top: 6;
  left: 6;
  height: 8px;
  width: 8px;
  background-color: #eee;
  border-radius: 50%;
}

.container:hover input ~ .checkmark {
  background-color: #ccc;
}

.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

.container .checkmark:after {
  top: 2px;
  left: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: white;
}

＆＃13;

感谢您的帮助。

Answer 1

我强烈建议使用Range输入类型而不是硬编码。检查MDN Web Docs上的新HTML5输入类型。

对于最合适的解决方案，您可以尝试this plugin，示例21正是您要查找的内容，并且创建自定义{ "rules": { "drink_database": { ".read": "auth != null", //Using a wildcard for the barcodes "$barcode": { //Only authenticated users can write when there is no existing data ".write": "auth != null && !data.exists()" } } } }输入类型不会花费您的时间。此外，它与不同的浏览器兼容，因此您不必担心兼容性问题。您所要做的就是更改其CSS以满足您的设计需求！

希望这可以帮助您在最短的时间内创建您真正需要的东西！

如何设置复选框按钮的样式以使其看起来像线段

1 个答案: