This question already has answers here:
Reset Styles for input elements and restyling to bring back the default appearance
(2 answers)
Closed 5 years ago.
Is there a way to reset the border of an input to its default? Using initial is supposed to do just that but instead removes the border completely.
.textinputs {
border: 1px solid red;
}
#txtReset {
border: initial;
}
<input type="text" class="textinputs" value="hello" />
<input id="txtReset" class="textinputs" type="text" value="world" />
The textinputs class can't be removed as it's set through a server control (the inputs are server controls rendered with the class).
The answer here is outdated and no longer valid as we now have the initial keyword.
You can redefine css for world textbox like:-
#txtReset {
border:1px solid #ccc;
}
input[type='text'] {
border: 1px solid red;
}
#txtReset {
border:1px solid #ccc;
}
<input type="text" value="hello" />
<input id="txtReset" type="text" value="world" />
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I want to make my input from this :
to this :
but, I had some trouble, I can't find the keyword on google how to make my input like that, anyone can tell me what should keyword I must input in google to know how to change my input like in second picture, thanks
You just need to modify your css like in the given example below, You can modify any element as per your requirements.
form {
background-color: #fff;
padding: 50px 20px;
}
label {
display: block;
font-size: 20px;
color: #42C8F1;
margin-bottom: 5px;
}
input {
border-width: 0 0 1px 0;
border-style: solid;
border-color: #ddd;
background-color: transparent;
outline-color: #fff;
}
input:focus {
outline: none !imporant;
}
<form>
<label>First Name</label>
<input type="text" name="firstname" placeholder="First Name">
</form>
You can do it with just simple CSS. I have just added simple CSS but you can add as your design requirements.
label{color:blue;font-weight: bold;display: block;}
input[type=text]{border: 0;outline: 0;padding: 5px 0;border-bottom: 1px solid black;}
<form>
<label>First Name</label>
<input type="text" name="firstname" placeholder="First Name">
</form>
I found following CSS in https://angular.io/docs/ts/latest/guide/forms.html
.ng-valid[required], .ng-valid.required {
border-left: 5px solid #42A948; /* green */
}
.ng-invalid:not(form) {
border-left: 5px solid #a94442; /* red */
}
I have not seen .ng-valid[required] syntax before. I guess .ng-valid is a class. Is [required] some new CSS syntax?
With the CSS attribute selector *[required] you can format elements with the attribute required. The syntax isn't new. See the following example:
input[required] {
border:1px solid red;
}
<input type="text" required/>
<input type="text"/>
This is often used in <form>s to define some elements like <input> as required. With the CSS attribute selector *[required] you can format these required elements.
You can also use the :required pseudo-class to format the required elements:
input:required {
border:1px solid red;
}
<input type="text" required/>
<input type="text"/>
The :required CSS pseudo-class represents any <input> element that has the required attribute set on it. This allows forms to easily indicate which fields must have valid data before the form can be submitted.
source: https://developer.mozilla.org/en-US/docs/Web/CSS/:required
http://jsfiddle.net/gn3LL/
.error { background-color: red; }
<input id="firstname" class="custom error" name="first_name" type="text" placeholder="" class="input-xlarge">
There is a small but noticeable white border around the inside of the input box. How do I remove it?
Just user border:none
input {border:none;}
Or in your error class
.error { background-color: red; border:none;}
DEMO
border:0px;
or
border:0px solid #000;
The problem is you have two class attributes in a single element.
It is not valid based on w3.org's 8.2.4.35 Attribute name state.
... if there is already an attribute on the token with the exact same
name, then this is a parse error and the new attribute must be removed
from the token.
So you need to combine them like this -
<input id="firstname" class="custom error input-xlarge"
name="first_name" type="text" placeholder="" >
Back to original question
jsfiddle
.error { background-color: red; border: 0; }
OR
input[type="text"] { border: 0; }
OR (After you combine them into one)
.input-xlarge { border: 0; }
.error { background-color:red; border:0; }
I am trying to use the native date input for a HTML5 form, the width is the same on every browser except for the Android default browser. Is this a known bug, and if so, how do I work around it as I do not know how to only target the Android default browser.
I have created a JSFiddle to demonstrate the issue. All of the fields should just touch the red lines on the right and left.
HTML:
<form>
<input type="text" id="text1" name="text1" placeholder="text input" />
<input type="date" id="date1" name="date1" placeholder="date input" />
<input type="text" id="text2" name="text2" placeholder="text input" />
</form>
CSS:
html, body, form, input {
padding: 0;
margin: 0;
}
body {
margin:50px;
}
form {
width: 202px;
}
form {
border:1px solid red;
border-top:none;
border-bottom:none;
}
input {
width: 200px;
border:1px solid black;
margin-bottom: 5px;
}
http://jsfiddle.net/ntyjG/
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