CODEWITHSUNDEEP
reactjssemantic-uistyled-components
user12465675
user12465675

Reputation:

Styled Component Semantic kit ( Form . Input )

Hello I would like to know how I could change css with the styled component of the form. semantic input

I need something like this on hoover:

enter image description here

But I can't change the background color of the input and also the border color in both default 

and hover:
export const FormCustom = styled(Form)`
&&& {
    background: #000;
}
`
export const FormInput = styled(Form.Input)`
&&& {
    color: red;
    background: transparent;
}
`

tried but to no avail

export const FormInput = styled(Form.Input)`
&&& {
    color: red;
    background: transparent;
}
`

my form:

<FormCustom size='large'>
        <Segment basic>
          <FormInput fluid icon='user' iconPosition='left' placeholder='E-mail address' />
          <FormInput
            fluid
            icon='lock'
            iconPosition='left'
            placeholder='Password'
            type='password'
          />

          <Button color='teal' fluid size='large'>
            Login
          </Button>
        </Segment>
      </FormCustom>

code: https://codesandbox.io/s/fast-morning-hq5zq

Upvotes: 3

Views: 306

Answers (2)

ankitkanojia
ankitkanojia

Reputation: 3122

Please refer to this example link: codesandbox

I have updated the CSS properties and made an effect on the hover of form-control using styled-component. Currently, I just set the color code based on image share by you, so you can change it to your desired color code.

Now on hover input control and icon color, both are changed as per your requirements.

You need to update the styled component as below

export const FormInput = styled(Form.Input)`
  border: 2px solid red;
  border-radius: 0.28571429rem;
  background: transparent;
  -webkit-box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset;
  box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset;
  input {
     border: none !important;
  }
  &:hover {
    border: 2px solid #7159c1;
    background: #333;
    i {
      color: #7159c1;
    }
  }
  &:focus {
    color: #000;
    border-color: #000;
    border-radius: 0.28571429rem;
    background: transparent;
    -webkit-box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset;
    box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset;
  }
`;

Upvotes: 0

Alex
Alex

Reputation: 3991

You can use &:hover to define hover.

   export const FormInput = styled(Form.Input)`
      border: 1px solid transparent;
      &:hover {
        border:1px solid #ff0000;
        border-radius:5px;
      }
    `;

temporary sample sandbox

Upvotes: 4

Related Questions