在反应引导程序中设置 Form.Check(复选框)控件的样式 [英] Styling a Form.Check (checkbox) control in react bootstrap

问题描述

我是 React 和 Bootstrap 的初学者.我想知道 - 如何设置 Form.Check(复选框)的样式，以便可以用更好的样式覆盖默认外观.(比如开关或任何其他外观和感觉).

这是我尝试过的(我使用了 css 样式，但没有按预期工作):

MyForm.js

从'react'导入React；import { Row, Form, Col, Button, Container } from 'react-bootstrap';class MyCustomClass 扩展了 React.Component {构造函数(道具){超级(道具)；使成为(){返回 (<div><br/><h3>页面标题</h3><表格><表单.组><表格检查类型=复选框"标签=点击我"/></Form.Group></表格>

)}}}

MyForm.css

.form-inline {宽度:100%；}.form-group {宽度:90%；}.输入组{宽度:90%！重要；}.form-control {宽度:67%！重要；}//这没什么区别.form-control [类型=复选框] {宽度:120px；高度:40px；背景:#333；边距:20px 60px；边框半径:50px；位置:相对；}

解决方案

这是我的 php 代码的转储，可以看看.

/*** 复选框二*/.checkboxOne {宽度:120px；高度:40px；背景:#333；边距:20px 60px；边框半径:50px；位置:相对；}}/*** 创建圆圈移动的线*/.checkboxOne:之前{内容: '';位置:绝对；顶部:19px；左:14px；高度:2px；宽度:90px；背景:#111；}/*** 创建圆圈点击*/.checkbox一个标签{显示:块；宽度:22px；高度:22px；边界半径:50%；过渡:所有 0.5 秒轻松；光标:指针；位置:绝对；顶部:9px；z-索引:1；左:12px；背景:#ddd;}/*** 为复选框创建点击事件*/.checkboxOne input[type=checkbox]:checked + label {左:84px；背景:#26ca28；}

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

</section>

I am a beginner in react and bootstrap. I would like to know - How can I style the Form.Check (checkbox) so that the default look and feel can be overridden with a better style. (say a switch or any other look and feel).

This is what I tried (I used a css style but it is not working as expected):

MyForm.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>
      )
    }
  }
}

MyForm.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;
  }

解决方案

This is a dump from my php code, this could be something to look at.

/**
 * 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>

这篇关于在反应引导程序中设置 Form.Check(复选框)控件的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！