I'm using antd NPM package's Select component. I want to remove the blue outline which appears when the component is focussed. How can I remove it ?
I have tried styling the component using styled components. The styling looks like follows:
const StyledSelect = styled(Select)`
& .ant-select-selection__rendered {
width: 200px;
margin-left: 0;
margin-right: 0;
&:focus {
outline: none;
border: none;
}
}
&.ant-select-focused {
border: none;
&:focus{
outline: 0;
}
}
`;
I expect the blue outline to be removed. But my styling doesn't seem to be working
If you observe the CSS in your browser you can see what you need to override.
.ant-select-focused .ant-select-selector,
.ant-select-selector:focus,
.ant-select-selector:active,
.ant-select-open .ant-select-selector {
border-color: #d9d9d9 !important;
box-shadow: none !important;
}
I left it for hover.
codesandbox: https://codesandbox.io/s/cool-moon-ohznt
A clean approach would be to set the bordered option to false as shown below. More options and reference are available at https://ant.design/components/select/#components-select-demo-bordered
<Select defaultValue="lucy" style={{ width: 120 }} bordered={false}>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
I managed to fix it in a difficult dropdown input with:
.ant-select:hover .ant-select-selector {
border-color: #a2a2a2 !important;
box-shadow: none !important;
}
This worked fine for me:
.ant-select-selector {
border-color: rgba(204, 204, 204, 0.5) !important;
box-shadow: none !important;
}
The border-color will overwrite the border when it's focused and when it's not, if you want to change the border just when it's focused apply a style on .ant-select-open
.ant-select-focused .ant-select-selector,
.ant-select-selector:focus,
.ant-select-selector:active,
.ant-select-open .ant-select-selector {
border-color: #d9d9d9 !important;
box-shadow: none !important
}
this worked for me to get ride of the default blue boarder when input is selected
Related
I wanted to create Radio Input Buttons styled Cards.
I am using react js and ant design.
Tried to create my own native component using good old input type="radio".
Connecting them to antd forms wasen't smooth sailing, then I had another idea.
Using antd react Radio component and just passing a card component. That's the working result!
Usage.tsx
// Other Code
<Radio.Group onChange={onChange} value={value} className="cards-container">
<Radio value={FOCUS_LEVEL.Regular} className="radio-input-card-container">
<InputCard
title="First Card"
checked={value === CONSTANT1}
imgPath="../../assets/icon1.svg"
points={["This is a point explain why this card is the best!", "Wow this is also a great point"]} />
</Radio>
<Radio value={FOCUS_LEVEL.DeepFocus} className="radio-input-card-container">
<InputCard
title="Second Card"
checked={value === CONSTANT2}
imgPath="../../assets/icon2.svg"
points={["This point explains why this card is way better", "The other card as shitty points!"]} />
</Radio>
</Radio.Group>
// Other Code
Usage.scss
.cards-container {
display: flex;
justify-content: space-between;
margin-left: 20px;
}
InputCard.tsx
import React from "react"
import Title from "antd/lib/typography/Title";
import "./InputCard.scss"
export function InputCard({ title, checked, imgPath, points }): JSX.Element {
return (
<div className={checked ? "card checked" : "card"}>
<div className="header-container">
<Title className="card-title">{title}</Title>
<img src={imgPath} alt="regular focus"></img>
</div>
<ul>
{points.map((point) =>
<li key={point.toString()}>{point}</li>
)}
</ul>
</div >
);
}
InputCard.scss
.card {
height: 420px !important;
width: 360px !important;
position: relative !important;
left: -45px; // A work around. Placing the card under the native radio button
-webkit-appearance: none;
appearance: none;
border: 2px solid rgba(2,28,53,0.08);
border-radius: 14px;
box-shadow: 7px 7px 15px rgba(2,28,53,0.08);
cursor: pointer;
outline: none;
.header-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
ul {
padding: 0em 1em 0em 2.5em !important;
}
img {
margin: 0.5em 0em 1em 0em;
}
}
.card-title {
font-size: 20px !important;
margin-top: 16px !important;
}
.checked {
transition: border 0.5s ease;
border: 2px solid rgba(255,0,0,0.6);
}
The antd component creates a radio input circle right before the card childe. Moving the card to the left (left: -45px) so the card will include the radio circle is a workaround. I don't want to change too much in the parent component for me to use this InputCard component, and this is my try to do it within the component.
I am fairly new to React and I am using styled-components.
const Button = styled.button`
height: 35px;
width: 85px;
color: #0288d1;
border: 1px solid #0288d1;
background: white;
border-radius: 1px;
&:hover {
cursor: pointer;
background: #cfe8ef;
}
&:focus {
background: #0288d1;
color: white;
}
`;
I would like to prevent the button from losing focus when the user clicks somewhere else on the screen. Would I need to add additional JavaScript code to do this or is there a CSS property that can help me with this issue?
Try below:
const setFocus = e => {
e.target && e.target.focus();
};
return (
<button
onBlur={e => {
setFocus(e);
}}
>
My Button
</button>
);
You can add :active in global stylesheet.
button:active {
border: 2px solid #000;
}
So any time, button tags receive this style in active mode.
I want to design a dynamic nav tabs component. when the card is clicked relevant tab is shown, with the connection arrow and border-color green.
sample code or a suggestion would be much helpful
.
You can use accordion by bootstrap. Use css flexbox to horizontally align the tabs next to each other and bind a javascript method that changes css color properties (arrow, green color) on clicking.
Here is the link - https://getbootstrap.com/docs/4.0/components/collapse/
Here is how you can do :
.js :
import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";
const App = () => {
const selectBlock = (e) => {
e.target.classList.toggle('selected');
}
return (
<div className="block" onClick={(e) => {selectBlock(e)}}>
<div>Here is the block</div>
<div className="arrow">
<FakeArrow />
</div>
</div>
);
};
const FakeArrow = () => {
return (
<div>
<span className="arrow-down-border" />
<span className="arrow-down" />
</div>
);
};
render(<App />, document.getElementById("root"));
.css :
.block {
position: relative;
width: 150px;
height: 50px;
text-align: center;
border: 2px solid black;
}
.arrow {
display: none;
}
.block.selected {
border: 2px solid #99d32c;
}
.block.selected .arrow {
display: block;
}
/* You need to fake the arrow border with another arrow behind */
.arrow-down-border {
position: absolute;
bottom: -20px;
left: 55px; /* 150px (main block) / 2 -20px (size of the triangle)*/
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #99d32c;
}
.arrow-down{
position: absolute;
bottom: -17px;
left: 58px; /* 150px (main block) / 2 -17px (size of the triangle)*/
width: 0;
height: 0;
border-left: 17px solid transparent;
border-right: 17px solid transparent;
border-top: 17px solid #ffffff;
}
Here is the repro on Stackblitz.
Of course this is just an example, you have to set a color for the arrows so my advice would be to do it with constants or props. Same thing for the position and others functionality you can add to the FakeArrow component.
Now, it would be waaaayy easier to manage it with an image if you really need a border (this is the tricky part in your requirement), or a simple arrow without border.
You can take a look at this post, it's the same question actually, i used a slightly different way to do it with css, but the result seems to be the same.
I am using react-select dropdown component in my react application. i found one weird issue that when user start typing for searching an item in react-select dropdown, search textbox gets stretch and its not a fixed with dropdown list.
Please see below image.
How can i fix the search textbox width to react-select width?
Just set
autosize={false}
on the component.
I had similar problem. I inspected browser and found out that if I set width to 82%, my problem will be solved. So I added that inside "Select" tag and it works
<Select
value={this.state.passwordExpire}
onChange={this.updatepasswordExpire.bind(this)}
options={optionsDays}
style={{width: '82%'}}
/>
const customStyles={
// control represent the select component
control: (provided)=>({
...provided,
width:'100px'
})
}
<Select
options={options}
styles={customStyles}
></Select>
This method is stated in react-select documentation. You can adjust select width as per your wish.
You can try with this css.
.Select-input {
position: absolute !important;
width: calc(~'100% - 0px');
}
.Select-value-label {
display: none !important;
}
.Select-value {
position: relative !important;
}
.Select-menu-outer {
width: auto;
min-width: 100%;
text-align: left;
}
.Select-option {
white-space: nowrap;
}
.Select-control {
min-width: 100%;
width: auto;
text-align: left;
}
.Select-control {
table-layout: fixed;
}
.Select-input {
overflow: hidden;
max-width: 100%;
}
Here is the Solution..
.Select-input > input {
width: 100% !important;
}
.Select--multi .Select-input {
display: block !important;
}
.Select--multi .Select-multi-value-wrapper {
display: block !important;
}
This is the proper solution in this case. It's working fine.
Hi i am using some bower packages but there are some css rule defined like below:
.rn-carousel-indicator {
width: 100%;
text-align: center;
height: 20px;
background-color: black;
I want to override it into my common.css to remove the background-color, I can successfully set it as red but it cannot apply with none:
.rn-carousel-indicator {
background-color: none;
}
Anyway I can do with this? Thanks a lot!
background-color:
The background-color CSS property sets the background color of an element, either through a color value or the keyword transparent.
So none is invalid, you should use:
background-color: transparent;
You have a couple of options
background: none;
or
background-color: initial;
Note, initial has some dodgy browser support.
(No support in IE apparently)
background-color: none is invalid. you have to use background color transparent property.
For example:
background-color: transparent;