So as i mentioned in the title when i am using styled component, I want to use ::after in my input and it does not work.. I put my code right below, so check it out
import styled from 'styled-components';
const Input = styled.input`
padding: 25px 80px;
border-radius: 100px;
margin: 15px 0px;
border: none;
border: 2px solid ${props => props.theme.colors.grey};
&:focus {
outline: none;
border: 2px solid ${props => props.theme.colors.main};
}
::after {
content: "hi"
}
`;
export default Input;
You can achieve it in the following way:
import styled from 'styled-components';
const div = styled.div`
padding: 25px 80px;
border-radius: 100px;
margin: 15px 0px;
border: none;
border: 2px solid ${props => props.theme.colors.grey};
&:focus {
outline: none;
border: 2px solid ${props => props.theme.colors.main};
}
&:after {
content: "hi"
}
`;
export default Input;
Input element doesn't allow the use of before and after pseudo classes
Related
How do I change the text color of the header and also for the content which is ant-collapse-content. I'm styling the AntCollapse using Styled and here's my code:
const StyledCollapse = styled(AntCollapse)`
&&& {
border: none;
border-radius: 0px;
box-shadow: none;
background: #0e0304;
}
.ant-collapse-content {
fontSize: 25px;
color: #fff;
}
.ant-collapse-header {
fontSize: 25px;
color: #fff;
}
`;
I tried using :global for both content and header but it didnt work as well.
try:
const StyledCollapse = styled(AntCollapse)`
&&& {
border: none;
border-radius: 0px;
box-shadow: none;
background: #0e0304;
}
&.ant-collapse-content {
fontSize: 25px;
color: #fff;
}
&.ant-collapse-header {
fontSize: 25px;
color: #fff;
}
`;
I have the next input type range in react:
inputElement = <div className={styles.InputElementRange}>
<input
min={props.min}
max={props.min}
value={props.value}
onChange={props.changed}
></input>
<input
type="text"
value={props.value}
onChange={props.changed}
style={props.stylesElement}
/>
</div>
and I got this:
The input type range works very well but I couldn't change the styles of the track.
How can I change the blue color by default? I want to replace the blue color for orange color.
Thanks in advance.
See this link to see how you can style the HTML slider
I found a solution:
inputElement = <div className={styles.InputElementRange}>
<input
min={props.min}
max={props.min}
value={props.value}
onChange={props.changed}
style={{'background': `linear-gradient(to right, orange ${(parseInt(props.value)-props.min)*100/(props.max-props.min)}%, #ccc 0px`}}
></input>
<input
type="text"
value={props.value}
onChange={props.changed}
style={props.stylesElement}
/>
</div>
and these are the styles:
input[type="range"] {
-webkit-appearance: none;
width: 100%;
height: 10px;
margin-right: 10px;
border-radius: 6px;
outline: 0;
background: #ccc;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 18px;
width: 18px;
border-radius: 3px;
background: orange;
border-radius: 50%;
border: 0;
cursor: pointer;
}
/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
height: 18px;
width: 18px;
border-radius: 3px;
background: orange;
border: 0;
border-radius: 50%;
cursor: pointer;
}
/* All the same stuff for IE */
input[type=range]::-ms-thumb {
height: 18px;
width: 18px;
border-radius: 3px;
background: orange;
border-radius: 50%;
border: 0;
cursor: pointer;
}
I thought my answer based in this answer: Ver link
Here's an easy one pretty straight forward.
Note that I'm using styled components but you can use the same with vanilla css or sass as well
import React, { useState } from 'react'
import styled from 'styled-components'
export const Slider = () => {
const [bgSize, setBgSize] = useState(0)
const handleSlide = (e) => {
setBgSize(e.target.value)
}
return (
<SliderContainer>
<ColorSlider
onChange={(e) => {
handleSlide(e)
}}
bgSize={bgSize}
min={0}
max={100}
type={'range'}
/>
</SliderContainer>
)
}
export const SliderContainer = styled.div``
export const ColorSlider = styled.input`
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
background-image: linear-gradient(#ff4500, #ff4500);
background-size: ${({ bgSize }) => bgSize}% 100%;
background-repeat: no-repeat;
border: 1px solid;
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
margin-top: -0.5em;
// position: relative;
appearance: none;
height: 25px;
width: 25px;
border: 1px solid black;
background: #4d4945;
border-radius: 100%;
cursor: pointer;
border: 1px solid black;
}
&::-webkit-slider-runnable-track {
-webkit-appearance: none;
appearance: none;
width: 100%;
max-width: 500px;
outline: none;
height: 10px;
border-radius: 10px;
background-image: transparent;
}
`
This is my first time using styledComponent.
Can someone tell me why my hover effect on SubmitBtn not working.
I just want to add hover effect on the submit button.
import styled from 'styled-components';
const SubmitBtn = styled.button`
width: 50%;
padding: 14px 20px;
margin: 8px 0;
display: inline-block;
border: none;
borderRadius: 4px;
cursor: pointer;
background: green;
color: white;
&:hover {
background: darkgreen;
color: grey;
}
`
<SubmitBtn>Submit Book</SubmitBtn>
I have taken the SubmitBtn out of component, and now it works.
You have to return/render the component.
import styled from 'styled-components';
const SubmitBtn = styled.button`
width: 50%;
padding: 14px 20px;
margin: 8px 0;
display: inline-block;
border: none;
borderRadius: 4px;
cursor: pointer;
background: green;
color: white;
&:hover {
background: darkgreen;
color: grey;
}
`
export const App = () => <SubmitBtn>Submit Book</SubmitBtn>
I have this 2 styled components
export const Icon = styled.svg`
width: 8px;
height: 8px;
background: black;
`
export const Dots = styled.div`
border: 2px solid green !imporant;
height: 30px;
background: white;
width: 16px;
height: 16px;
border: solid 1px #d2d2d2;
border-radius: 20px;
top: 25px;
position: relative;
${Icon}: hover {
background:black;
}
}
`
I want to display Icon on the hover of this div but i dont understand why it is not working,
Any suggestions please?
There is no problem with your code except on hover you don't change the color from its default value black
const Icon = styled.div`
width: 100px;
height: 100px;
background: black;
`;
export const Dots = styled.div`
${Icon}:hover {
background: red;
}
`;
export default function App() {
return (
<Dots>
<Icon />
</Dots>
);
}
https://codesandbox.io/s/styled-react-template-forked-nzwm8
You should place the hover styles inside the icon
export const Icon = styled.svg`
width: 8px;
height: 8px;
background: black;
&:hover {
background: black;
}
I have the following scss:
.skillBox {
position: relative;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 20px #ccc;
padding: 1em;
&:hover {
padding: 3em;
.d-none {
display: inline-block !important;
}
}
&:hover .d-none {
display: inline-block !important;
}
}
On hover, I get the padding:3em but both the nested, and inline child rule didn't work, ie .d-none class wasn't overridden.
What's the right way of writing the rule with CSS module?
I'm trying out CSS module with CRA and custom-react-scripts with sass and modules turned on (REACT_APP_SASS_MODULES=true).
Or perhaps I should use styled components instead? Was trying to figure out which one to go for for react apps.
you can try this code to solve your problem
.skillBox {
position: relative;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 20px #ccc;
padding: 3em;
background: red;
&:hover {
&.d-none {
background: black;
color: #fff;
padding: 20px;
}
}
}
.d-none {
background: green;
color: #fff;
padding: 20px;
}
<div class="skillBox">
Parrent
<div class="d-none">Childred</div>
</div>
Exmaple :: https://codepen.io/anon/pen/yqQNJXCodePen
There's nothing wrong with your CSS. See the demo below.
.skillBox {
position: relative;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 20px #ccc;
padding: 1em;
.d-none{
display: none;
}
&:hover {
padding: 3em;
.d-none {
display: inline-block;
}
}
}
https://codepen.io/paulcredmond/pen/djQoow
In case if element with skillbox and d-none class are siblings below is the css for that
.skillBox {
position: relative;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 20px #ccc;
padding: 1em;
&:hover {
padding: 3em;
}
}
.dnone {
display: none;
}
.skillBox:hover ~ .dnone {
display: inline-block;
}
http://jsbin.com/hixamotuku/edit?html,css,output
So I realise CSS Modules created a customised classname for .d-none and applying that classname worked.
So I changed the classname altogether making it an entirely new class that overrides .d-none.
.skillBox {
position: relative;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 20px #ccc;
padding: 1em;
&:hover {
.dNone {
display: inline-block !important;
}
}
}
And applying by adding them as an array then joining them together:
<i className={['fas fa-times-circle d-none', styles.faTimesCircle, styles.dNone].join(' ')} onClick={this.onDelete} />