I get the below black borders in my input fields. How do I remove the ugly 1px border around the controls?
I can't find it in the CSS or don't know how to look for it as I'm new to it.
Code:
<ion-col col-8>
<input formControlName="cardno" placeholder="{{ 'PAYMENT_CARD_NUMBER' | translate }}" card-number />
</ion-col>
Result ugly 1px borders around inputs:
Clean Inputs & textarea:
textarea, input
{
background:none;
outline: none;
-webkit-appearance: none;
box-shadow: none !important;
border: none;
}
Simple Way
input{
border: none; // for black border
outline: none; // for focus outline remove
}
You can add a style attribute to your input and set the border to none
<ion-col col-8>
<input style="border:none;" formControlName="cardno" placeholder="{{ 'PAYMENT_CARD_NUMBER' | translate }}" card-number />
</ion-col>
If you have more than one input tag in your html-file I would prefer to use an external CSS-file and write the following lines to disable the borders for all inputs!
input {
border: none;
}
To remove borders from <input>, just set border property to none.
input {
border: none;
}
<input type="text" placeholder="Card number">
For more info, refer MDN documentation on border property.
If you want to keep the bottom border, and add some padding and margin, see below example.
input {
height: 2rem;
margin: 0rem 1rem;
padding: 0rem 1rem;
border-width: 0px;
border-bottom: 1px solid #e4e9f0;
}
input:focus {
outline: none;
}
<input type="text" placeholder="Card number">
Related
I have the following code:
<div class="input-group want-outline">
<input class="form-control no-outline #(IsValid ? "" : "is-invalid")"
type="text"......
and this is my scss:
.no-outline:focus {
box-shadow: none;
&.want-outline {
border-radius: 2.5rem;
border-color: #80bdff;
border-width: 0.2rem;
}
}
when the input receives focus, it correctly sets box-shadow to none, but doesn't apply the border details to the parent. ive also tried:
& { border-radius.....
and
> & { border-radius.....
to reference the parent, these dont work either.
You can set the border on the focus-within style property which will apply styles to the parent element when the focus is within it (ie - when the input within it has focus.. The following uses straight css but can easily be converted to scss.
Note that IE does not support this style property at all (https://caniuse.com/?search=focus-within) but really who cares about ie? :)
Also - your border problem might be because you are not setting the border type (eg " solid / dashed / dotted) - i tend to set all the border styles in the shorthand version most of the time.
.no-outline:focus {
box-shadow: none;
}
.want-outline {
padding: 16px;
border-radius: 2.5rem;
display: inline-block;
border: solid 0.2rem transparent;
}
.want-outline:focus-within {
border-color: #80bdff;
}
<div class="input-group want-outline">
<input class="form-control no-outline" type="text" placeholde="enter txt"/>
<div>
I want to change the styling for antdesign Input component and I am not sure how to make it work.
Now, I have been able to change the style on validation success and the border color changes to green on hover.
but still, when I click in the field to type, it still shows blue border.
Now, why is that happening?
How do I override the antdesign styles?
<FormItem hasFeedback validateStatus={this.state.passwordErr} help={passwordHelp} label="Password" >
<Input className={validClass} type="password" name="password" value={this.state.password} onChange={this.handlePassword} />
</FormItem>
this is a small relevant portion.
this css works for the hover
.success:hover{
border:1px solid green;
box-shadow: 0 0 2px green;
}
but this doesnt work when I do it without hover
.success:hover{
border:1px solid green;
box-shadow: 0 0 2px green;
}
I have noticed that this is the portion that is blocking my css
.ant-input:focus {
border-color: #5070f2;
outline: 0;
-webkit-box-shadow: 0 0 0 2px rgba(40, 72, 229, 0.2);
box-shadow: 0 0 0 2px rgba(40, 72, 229, 0.2);
}
So, how do I override this css and force it to use mine?
here's the image of the effect
i want to change the blue to green.
and here's the code in inspect
You overwrite only the styles on :hover, you say that you found that .ant-input:focus { is overwriting your styles.
Why don't you write styles for the :focus event then ?
.success:focus {
border:2px solid red;
}
<input type="text" class="success">
If this doesn't work, write a more specific path like input.success:focus or form input.success:focus
But i guess ( since it's about focus on input elements ) that the problem is with the outline which appears on focus
You can either change the outline color/width etc. or hide it with outline:none and use your border style
input.success:focus { /*or a more specific selector*/
outline-color: red;
}
<input type="text" class="success">
input.success:focus { /*or a more specific selector*/
outline:none;
border:3px solid red;
}
<input type="text" class="success">
I came to the same problem and my solution works well for Antd version4.
<Input suffix={<Component />}/>
css:
.ant-input-affix-wrapper {
border: ....;
}
.ant-input-affix-wrapper-focused {
border: ...;
box-shadow: ...;
}
I use "antd": "^4.24.2", and here is what worked for me.
Add the following👇🏽 to your global css, and import the global css into your root folder.
.ant-input-affix-wrapper.ant-input-password {
border: none;
}
.ant-input-affix-wrapper-focused {
box-shadow: none !important;
}
Edit: apparently cant use <> braces or it hides names?...
I've seen a few variations of this question asked, however none of what I found fits my particular issue, which I think is a simple issue. I am creating the following radio button group in react:
const myOptions = ["YTD", "Week", "Month", "Pre AS", "Post AS"]
const myButtons =
<form>
<div className="radio-group">
{myOptions.map((d, i) => {
return (
<label>
<input
type={"radio"}
value={myOptions[i]}
checked={timeframeNew === myOptions[i]}
onChange={this.handleTimeframeNewChange}
/>
<span>{myOptions[i]}</span>
</label>
)
})}
</div>
</form>;
and here is my current CSS for styling the buttons to look nice...
input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
color: #333;
background: #EEE;
display: inline-block;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
border: 2px solid orange;
}
input[type=radio]:checked + label {
color: red;
background: #333;
}
label + input[type=radio] + label {
border-left: solid 2px blue;
}
.radio-group {
border: solid 2px green;
display: inline-block;
margin: 20px;
border-radius: 10px;
overflow: hidden;
}
Unfortunately, the CSS is not working as intended. In particular, the following selection - input[type=radio]:checked + label does not work because there is no label immediately after an input. The only way so far I have been able to successfully get my react onChange handler function to work is by putting the input inside of the label, like this, and then returning the label in each .map loop.
*Since the return needs to be a single element, if I want to take the out of the label, I would need to then include them both in a div or a span, and for some reason doing so breaks my onChange handler...
So my question is, how how how can I, in CSS, grab the label that corresponds to the clicked input. I would like to change the entire label's color and background when it is / isn't clicked, so selecting the span does not help (since that only changes the texts color/background, not the whole label.
Thanks in advance!!
CSS can select child and sibling elements, but not parent elements. I often hide default radio buttons and checkboxes and create my own, like this:
.button-group{
font-size:0; /*Prevents a space from occuring between buttons*/
}
.button-group input{
position:absolute;
visibility:hidden; /* display:none causes some browsers to ignore the input altogether */
}
.button-group input+span{
display:inline-block;
line-height:20px;
font-size:1rem;
vertical-align:top;
padding:0 10px;
color:#000;
border-left:1px solid #a00;
}
.button-group label:first-child input+span{
border-radius:10px 0 0 10px;
border-left:0;
}
.button-group label:last-child input+span{
border-radius:0 10px 10px 0;
}
.button-group input:not(:checked)+span{
background-color:#faa;
}
.button-group input:not(:checked)+span:hover{
background-color:#f66;
}
input[type=radio]:checked+span{
background-color:#f33;
}
<div class="button-group">
<label>
<input type="radio" value="1" name="myfield" />
<span>Option 1</span>
</label>
<label>
<input type="radio" value="2" name="myfield" />
<span>Option 2</span>
</label>
<label>
<input type="radio" value="3" name="myfield" />
<span>Option 3</span>
</label>
</div>
*Since the return needs to be a single element, if I want to take the out of the label, I would need to then include them both in a div or a span, and for some reason doing so breaks my onChange handler...
You can use <React.Fragment> <input /> <span /> </ReactFragment> to return multiple elements without rendering them inside a div or span
I am using the following simple jquery to add the class .error to an input element:
$(this).addClass("error");
The error class looks like this:
.error{
border-color: red !important;
border-style: solid !important;
box-sizing: border-box;
}
my input style:
.fatform {
width:125px;
height:21px;
text-align:left;
background-color: rgba(255, 255, 255, 1);
border:none;
padding:10px;
}
.checkout_float_left {
float: left;
margin: 5px;
}
Html:
<div class="checkout_float_left">
<input type="text" name="email" value="email#email.com" style="width:290px;" class="fatform error" title="E-Mail">
</div>
<div class="checkout_float_left">
<input type="text" name="phone" value="5144291849" style="width:290px;" class="fatform error" title="Phone Number">
</div>
When the error class is activated the border shows properly but the input shrinks in size. If I don't use border-box sizing then when the border is shown it pushes the elements around because it changes the size of them to be larger.
What can I do to avoid this?
Try adding min-width to your css for input elements as it will fix sizes of input control.
Let me know if it will work for you
I try to create login page contains username and password but i want rounded grouped inputs(username and password). I tried this:
border: none;
border-color: transparent;
using css, but still border is coming what might be error.
Solution 1
Working example: http://jsfiddle.net/Gajotres/95Paz/
CSS used:
.ui-input-text {
border: none !important;
border-color: transparent !important;
}
Solution 2
Working example: http://jsfiddle.net/Gajotres/95Paz/1/
HTML
<div id="wrapper">
<input type="text" style="border:none" autocorrect="off" autocapitalize="off" name="username" id="username" placeholder="Username or Email" />
<input type="password" style='border-radius:5px;' id="password" placeholder="Password" />
</div>
CSS
#wrapper .ui-input-text {
border: none;
border-color: transparent;
}
More info
When working with jQuery Mobile you need to understand that final HTML content is enhanced and it don't look like previous one. Also when overrding classes !important must be used. Read more about it here.
When using jQuery Mobile, you need to disable its auto-enhanced as follow
HTML
<input type='text' data-role='none'>
CSS
input, input:hover, input:focus, input:active {
background: transparent;
border: 0;
border-style: none;
border-color: transparent;
outline: none;
outline-offset: 0;
box-shadow: none;
}