Question

我想用CSS自动为星号添加星号。

我的标记 -

<label for="DsrCode">DSR Code</label>
<input id="DsrCode" name="DsrCode" required="required" type="text" value="" />

目前我试过 -

input:required label:after {
  content: " *";
  color: red;
}

但它不起作用。

Answer 1

如果可以先input label调整标记，+秒，则可以使用~或input:required + label:after { content: " * "; color: red; }对兄弟选择器进行调整。

<input type="text" required>
<label>Label</label>

label

如果您确实需要先input .fieldset { display: flex; flex-direction: row-reverse; justify-content: flex-end; } input:required + label:before { content: " * "; color: red; }秒，<div class="fieldset"> <input type="text" required> <label>Label</label> </div>秒，您可以使用flexbox来移动它们。

crop,records
CASSAVA,350
MAIZE,226
TOMATOES,137

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Abbie's attempt at D3</title>
        <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
        <style>
        svg {
            background-color: rgba(227, 227, 227, 0.97);
            }
        .bar {
            margin: 20px;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript">
            var margin = {top: 20, right: 30, bottom: 100, left: 40};
            var w = 500 - margin.left - margin.right;
            var h = 500 - margin.top - margin.bottom;
            var barPadding = 5;
            var cropData;

    // load the csv file
    d3.csv("crops.csv", function(error, data) {
        data.forEach(function(d) {
            d.records = +d.records;
        });
        cropData = data;

        var arrayLength = cropData.length;
        var yMax = d3.max(cropData, function(d) {
                return d.records;
        });

        var yScale = d3.scaleLinear()
                            .domain([0, yMax])
                            .range([h, 0]);

        var xScale = d3.scaleBand()
                        .domain(cropData.map(function(d) {
                            return d.crop;
                        }))
                        .rangeRound([0, w]);

        // create the svg
        var svg = d3.select("body")
                    .append("svg")
                        .attr("width", w + margin.left + margin.right)
                        .attr("height", h + margin.top + margin.bottom)
                    .append("g")
                        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        // bars
        svg.selectAll("rect")
            .data(cropData)
            .enter()
            .append("rect")
            .attr("x", function(d, i) {
                return i * xScale.bandwidth() + 5;
                })
            .attr("y", function(d) {
                return yScale(d.records);
                })
            .attr("width", xScale.bandwidth() - 5)
            .attr("height", function(d) {
                return h - yScale(d.records);
                })
            .attr("fill", "teal")
            .attr("class", "bar");

        // x Axis
        var xAxis = d3.axisBottom(xScale);
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + h + ")")
            .call(xAxis)
            .selectAll("text")
                .style("text-anchor", "end")
                .attr("dx", "-.8em")
                .attr("dy", ".15em")
                .attr("transform", function(d) {
                    return "rotate(-60)"
                    });

        // y Axis
        var yAxis = d3.axisLeft(yScale);
        svg.append("g")
            .call(yAxis);

    </script>
</body>

使用伪元素在必填字段上添加星号

1 个答案: