代码之家 › 专栏 › 技术社区 › DotNetSpartan

设计窗体的样式。复选框(checkbox)控件作为开关或在react引导中具有更好外观的复选框

react-bootstrap reactjs css javascript

DotNetSpartan · 技术社区 · 5 年前

我是react和bootstrap的初学者。我想知道-我该如何设计表格。选中(复选框),以便可以用更好的样式覆盖默认外观。(例如开关或任何其他外观)。

这就是我试过的 (我使用了css样式,但效果不理想):

我的表格。js公司

import React from 'react';
import { Row, Form, Col, Button, Container } from 'react-bootstrap';

class MyCustomClass extends React.Component {
  constructor(props) {
    super(props);

    render()
    {
      return (
        <div>
          <br />
          <h3>Page Title</h3>
          <Form>
            <Form.Group >
              <Form.Check
                type="Checkbox"
                label="Click me"              
              />
            </Form.Group>
          </Form>
        </div>
      )
    }
  }
}

我的表格。css

.form-inline {
    width: 100%;
  }

  .form-group {
    width: 90%;
  }

  .input-group {
    width: 90% !important;
  }

  .form-control {
    width: 67% !important;
  }

  //This makes no difference
  .form-control [type=checkbox] {
    width: 120px;
    height: 40px;
    background: #333;
    margin: 20px 60px;

    border-radius: 50px;
    position: relative;
  }

0 回复 | 直到 5 年前

Ziwei Lin 4 年前

尝试更改: .表单控件[类型=复选框] 到 .表单检查 用于CSS样式。这对我使用 <Form.Check/>

user11412912 user11412912 5 年前

这是我的php代码中的一个转储文件,可以看一下。

/**
 * Checkbox Two
 */
.checkboxOne {
    width: 120px;
    height: 40px;
    background: #333;
    margin: 20px 60px;

    border-radius: 50px;
    position: relative;
}
}

/**
 * Create the line for the circle to move across
 */
.checkboxOne:before {
    content: '';
    position: absolute;
    top: 19px;
    left: 14px;
    height: 2px;
    width: 90px;
    background: #111;
}

/**
 * Create the circle to click
 */
.checkboxOne label {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;

    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    top: 9px;
    z-index: 1;
    left: 12px;
    background: #ddd;
}

/**
 * Create the click event for the checkbox
 */
.checkboxOne input[type=checkbox]:checked + label {
    left: 84px;
    background: #26ca28;
}

<section>
  <h3>Switch</h3>
    <div class='checkboxOne'>
        <input type='checkbox' value='1' id='checkboxOneInput' name='' />
        <label for='checkboxOneInput'></label>
    </div>
</section>