diff options
| -rw-r--r-- | src/components/InputTypes/Radio.tsx | 25 |
1 files changed, 23 insertions, 2 deletions
diff --git a/src/components/InputTypes/Radio.tsx b/src/components/InputTypes/Radio.tsx index be0f60e..3bf13ed 100644 --- a/src/components/InputTypes/Radio.tsx +++ b/src/components/InputTypes/Radio.tsx @@ -1,6 +1,8 @@ /** @jsx jsx */ import { jsx, css } from "@emotion/react"; import React, { ChangeEvent } from "react"; +import colors from "../../colors"; +import { multiSelectInput, hiddenInput } from "../../commonStyles"; interface RadioProps { option: string, @@ -8,10 +10,29 @@ interface RadioProps { handler: (event: ChangeEvent<HTMLInputElement>) => void } +const styles = css` + div { + width: 0.7em; + height: 0.75em; + top: 0.18rem; + + border-radius: 50%; + } + + :hover div, :focus-within div { + background-color: lightgray; + } + + input:checked+div { + background-color: ${colors.blurple}; + } +`; + export default function Radio(props: RadioProps): JSX.Element { return ( - <label> - <input type="radio" name={props.question_id} css={css`margin: 1rem 0.5rem 0 0;`} onChange={props.handler}/> + <label css={styles}> + <input type="radio" name={props.question_id} onChange={props.handler} css={hiddenInput}/> + <div css={multiSelectInput}/> {props.option}<br/> </label> ); |