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";
Related
I'm 15 days into learning to code. I did the HTML modules on Freecodecamp, and I've started a mini project on CodePen. I've found I've already forgotten a ton, but I want to crack on with the project as that's what's helping me learn stuff.
My mini-project is a sign up form. Currently only email, but later I want to add first/last name plus other data points. However I want to know how to style the box of the email so it can be a bit bigger, plus I want to be able to make the text next to my checkbox smaller. But I've gotten stuck on both parts. I used a basic template for the form and adjusted it from there, but I'm really stuck on the styling.
My code is below. Am I along the right lines?
HTML
<!--- These are my sign up form elements --->
<div class="myForm"><b>Below is a form</b></div></br>
<label for="email">
<input type="text" placeholder="Enter Email" name="email" required>
</br></br>
</label>
<label>
<button type="submit" class="signupbtn">Sign me up!</button>
</br>
</br>
</label>
<label>
<input type="checkbox"> I agree to the terms and conditions here</input>
</label>
CSS
body {
font-family: Verdana,Arial,sans-serif;
font-size: 18px;
}
p {
font-size: 14px;
}
.myForm{
font-family: Verdana,Arial,sans-serif;
width: 200px;
}
button {
background-color: #4CAF50;
color: white;
border-radius: 10px;
font-size: 16px;
padding: 8px;
}
label[for=email] {
font-size: 20px;
}
body {
font-family: Verdana, Arial, sans-serif;
font-size: 18px;
}
.myForm {
width: 200px;
}
.enter-email {
width: 300px;
/* what ever width you want */
height: 20px;
/* change the height if you want like this */
}
button {
background-color: #4CAF50;
color: white;
border-radius: 10px;
font-size: 16px;
padding: 8px;
}
.terms-conditions {
font-size: 16px;
/* change the size of the font */
}
<!--- These are my sign up form elements --->
<div class="myForm"><b>Below is a form</b></div>
</br>
<label for="email"> Enter E-mail:</label>
<input class="enter-email" type="text" placeholder="Enter Email" name="email" required>
</br>
</br>
<button type="submit" class="signupbtn">Sign me up!</button>
</br>
</br>
<input type="checkbox">
<span class="terms-conditions"> I agree to the terms and conditions
here
</span>
</input>
This will help you. To change the input box for the text use a class on it and change its properties(search for more other than the two I showed) or you could have done input[type=text] to select that text input but classes are better if you have more text inputs and want them styled differently.
As for the changing text of terms and conditons, you could have wrapped it in paragraph tags, heading tags and also as I used span tags. Then again give them a class and change the font-size.
Also as pointed out in the comment you don't need to specify the font-family everytime unless you want a different font applied there. Everything text property applied in body will be given to all the text in the body unless you specify something for that text otherwise.
I was going through https://angular.io/docs/ts/latest/guide/forms.html as exercise then I came through this piece of code:
.ng-valid[required], .ng-valid.required {
border-left: 5px solid #42A948; /* green */
}
.ng-invalid:not(form) {
border-left: 5px solid #a94442; /* red */
}
Why are both of .ng-valid[required], .ng-valid.required selectors used at the same time and cant we just replace this by only one of them?
The .ng-valid[required] rule is valid for
<input class="ng-valid" required>
The .ng-valid.required rule is valid for
<input class="ng-valid required">
Both rules are valid for
<input class="ng-valid required" required>
Now you can choose which solution you want to use and remove the not necessary rules on your CSS.
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 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;
}
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