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;
}
Related
I need to customize the css of some React classes. In this case my aim is to display an input in a form with this css (a straight line without background):
.text-line {
background-color: transparent;
color: #eeeeee;
outline: none;
outline-style: none;
border-top: none;
border-left: none;
border-right: none;
border-bottom: solid #eeeeee 1px;
padding: 3px 10px;
}
I've tried either with adding inline css or with creating custom classes but nothing seem to work.
<Form>
<Form.Group controlId="formBasicEmail">
<Form.Label>Phone number, email or username</Form.Label>
<Form.Control type="email" placeholder="Enter email" onChange={this.handleUsernameChange} value={this.state.username} />
</Form.Group>
</Form>
Is there a way to clean override react default css classes? I've also included react-bootstrap with npm.
As shown in the documentation, you can provide a css class (called className in React) like that:
<Form>
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
</Form>
You'll need to import the css file like that:
import "example.css";
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">
Is there a way to use CSS to update input fields without changing HTML code?
I have a form like this:
// HTML
<div id="LoginFormContainer">
<div class="formInputLine">
<div class="inputContainer">
<input name="txtUserID$Textbox1" type="text" maxlength="15" id="txtUserID_Textbox1" placeholder="Username" title="Username">
</div>
</div>
<div class="formInputLine">
<div class="inputContainer">
<input name="txtPassword$Textbox1" type="password" maxlength="15" id="txtPassword_Textbox1" placeholder="Password" title="Password">
</div>
</div>
<div class="formInputLine">
<input type="submit" name="btnLogin" value="Login" id="btnLogin"><input name="builderID" type="hidden" id="builderID" value="abc">
</div>
</div>
//CSS
#FormLoginPage #LoginFormContainer .formInputLine .inputContainer input {
text-transform: uppercase!important;
}
#FormLoginPage #LoginFormContainer .formInputLine .inputContainer input {
border: none;
font-size: 12px;
width: 100%;
color: #333;
outline: 0;
-webkit-appearance: caret;
}
// TRYING CSS - able to use this code to add a label but it applies to all input. Not sure how to target only the individual class with a specific id within it.
.formInputLine::before {
content: "Username";
}
And would like to change it to the following using only CSS:
Please note that the above code is actually part of this code I got from a 3rd party. So I am not sure if I can control it via the iframe tag.
Thanks for the help, I greatly appreciate it.
If the input fields have wrapper elements you can use pseudo elements (before or after) on that wrapper to create what you want with pure css, otherwise you'll have to use javascript to manipulate the html structure / add elements etc.
So, for an example, if we have the following HTML structure:
<div class="input-wrapper">
<input type="text" placeholder="some text">
</div>
We can do the following in CSS:
.input-wrapper {
position: relative;
}
.input-wrapper:before {
position: absolute;
left: 0;
bottom: calc( 100% + 10px );
content: "some text";
}
::-webkit-input-placeholder {
color: transparent !important;
}
(This one is used if we have a placeholder and we want to hide it. On production should also use the -moz- and -ms- prefixes).
You could have something like this:
I've included my own font, due to lack of context.
body {font-family: "Droid Sans"}
.Input-Element {padding: .3em;margin: .5em 0}
.Input-Element label {display: block;text-transform: uppercase;padding: .2em 0;font-size: .8em}
.Input-Element input {border:1px solid rgba(0, 0, 0, 0.34);padding:.5em;outline:none;transition: border .25s}
.Input-Element input:focus {border-color: rgba(0, 0, 0, 0.73)}
<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
<div class='Input-Element'>
<label>Username</label>
<input name='user'>
</div>
<div class='Input-Element'>
<label>Password</label>
<input name='psw'>
</div>
Note: Click Run Code Snippet to see the form!
I was playing with the ideas provided by a few solutions here. After some researching on my own with :nth-child, here is the solution I have for my question. I am sure there is an other way to do the CSS selection. But this is what I have for now.
Using the CSS below can target the two fields individually and add the specific labels
/* add labels */
.formInputLine:nth-child(1)::before {
content: "Username";
}
.formInputLine:nth-child(2)::before {
content: "Password";
}
/* remove place holder */
::-webkit-input-placeholder {
color: transparent;
}
:-moz-placeholder {
/* Firefox 18- */
color: transparent;
}
::-moz-placeholder {
/* Firefox 19+ */
color: transparent;
}
:-ms-input-placeholder {
color: transparent;
}
You can use some jquery and css
$("input").wrap("<div class='custom-input'></div>");
$('.custom-input').eq(0).before("<label>USER NAME</label>");
$('.custom-input').eq(1).before("<label>PASSWORD</label>");
::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" valu "USER NAME" placeholder="USER NAME"><br>
<input type="passsword" placeholder="PASSWORD">
I have to bring red borders around the input element in chrome on HTML5 validation like as that of Firefox.
I have search it a lot but unable to find precise answer.
Any help of how to do it using css is greatly appreciated.
Thank you.
You use the :valid pseudo class.
To shamelessly copy the code from https://developer.mozilla.org/en-US/docs/Web/CSS/:valid:
input:invalid {
background-color: #ffdddd;
}
form:invalid {
border: 5px solid #ffdddd;
}
input:valid {
background-color: #ddffdd;
}
form:valid {
border: 5px solid #ddffdd;
}
input:required {
border-color: #800000;
border-width: 3px;
}
<form>
<label>Enter a URL:</label>
<input type="url" />
<br />
<br />
<label>Enter an email address:</label>
<input type="email" required/>
</form>
Try adding 'required' in the DOM element
<input name="heading" type="text" class="form-control" placeholder="heading" maxlength="35" required />
I'm trying to get a garish red border around some radio buttons, but it is not showing up in Firefox latest or Chrome latest. Work fine in IE9/IE8.
Each of the input element on my form that are required has a data-val-required attribute put in by MVC3. All browsers puts in the red borders just dandy when we have a text or textarea inputs, but am struggling with the radio button. For IE, it works, but other browsers won't put the red border around it.
css:
input[data-val-required], select[data-val-required], textarea[data-val-required]
{
background-color: #F0FFFF;
border: 1px solid red;
}
view-source:
<label for="WaiveSelect">Do you waive confidentiality?</label><br />
<input data-val="true" data-val-number="The field WaiveSelect must be a number." data-val-required="Please select waive." id="WaiveSelect" name="WaiveSelect" type="radio" value="0" /> No, I do not waive confidentiality<br />
<input id="WaiveSelect_2" name="WaiveSelect" type="radio" value="2" /> Yes, I waive confidentiality<br />
<input id="WaiveSelect_3" name="WaiveSelect" type="radio" value="3" /> Yes, I waive confidentiality except to the client<br />
<span class="field-validation-valid" data-valmsg-for="WaiveSelect" data-valmsg-replace="true"></span>
What it looks like in IE (Firefox and Chrome shows no borders):
input[type=radio]{
outline: 1px solid red
}
I know this is four years old, but I came up with a nice solution using CSS Pseudo elements.
My requirement was to highlight an unchecked checkbox, or radio button in validation.
<input type="radio" class="required" name="radio1"/>
/* Radio button and Checkbox .required needs an after to show */
input[type=radio].required::after, input[type=checkbox].required::after {
display: block;
width: 100%;
height: 100%;
background: transparent;
content: '';
border: 2px solid red !important;
box-sizing: border-box;
}
/* Radio buttons are round, so add 100% border radius. */
input[type=radio].required::after {
border-radius:100%;
}
You could accomplish by wrapping each input element with div tag and give it a border and a float left... like this:
<div style="border:1px solid red;float:left">
<input type="radio".. />
</div>
No, I do not waive confidentiality
Not all browsers support borders around radio buttons and checkboxes. I voted for a bug years ago to have this included in Gecko but so far they haven't implemented it.
This may help you:
.style {
border: 1px solid red;
width: 20px;
height: 20px;
text-align: center;
margin-top: 2px;
background-color: #f0ffff;
}
<div class="style">
<input type="radio" />
</div>
<div class="style">
<input type="radio" />
</div>
<div class="style">
<input type="radio" />
</div>
<div class="style">
<input type="radio" />
</div>
View on JSFiddle
Complete code using jquery
https://jsfiddle.net/xcb26Lzx/
$(function(){
$('.layer').css('border',0);
$('input:radio').change(
function(){
if ($(this).is(':checked')) {
$('.layer').css('border','1px solid red');
}
});
});
Try this...
Put a div around the input and assign a class to the div like so:
<div class="custom"><input type="radio"></div>
Then open your custom css file and add this CSS
.custom {border: 1px solid red; border-radius: 30px; padding: 3px 3px 0 3px; background: red;}
This should create a nice red border around the radio button. If you're using a check box you would simply remove the border-radius: 30px from the css. Depending you may need to play with the padding a bit to center the button, but this worked for me.
Edit: You will also want to assign the following CSS to the div so it lines up correctly.
.custom {display: inline;}
fiddle link