I am trying to change the border and label color of the form input in materialize css. I followed the documentation but only the first instance of the .input-field div is being changed, the rest are still using the default style.
Codepen
HTML
<div class="input-field">
<input id="account_name" type="text" class="validate">
<label for="account_name">Account Name</label>
</div>
<div class="input-field">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
<div class="input-field">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
CSS
/* label color */
.input-field label {
color: #000;
}
/* label focus color */
.input-field input[type=text]:focus + label {
color: purple !important;
}
/* label underline focus color */
.input-field input[type=text]:focus {
border-bottom: 1px solid purple !important;
box-shadow: 0 1px 0 0 purple !important;
}
/* valid color */
.input-field input[type=text].valid {
border-bottom: 1px solid purple !important;
box-shadow: 0 1px 0 0 purple !important;
}
/* invalid color */
.input-field input[type=text].invalid {
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #000;
}
/* icon prefix focus color */
.input-field .prefix.active {
color: #000;
}
EDIT: typo on title
Your CSS is pseudo-selecting inputs with [type=text]. Don't you want to get the ones with type="email" and type="password" too?
Related
I have an input group with icon placed before the input. I would lika to change the border of the whole input-group when the input is focused + change the color of the fa-icon
HMTL
<div class="input-group">
<span class="input-group-text" id="basic-addon1">
<fa-icon [icon]="['fas', 'search']" size="1x"></fa-icon>
</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
CSS
.input-group-text{
background-color: white;
color: var(--gray-200);
}
.form-control{
height: 50px;
border-left: 0;
}
.form-control:focus{
box-shadow: none;
border-color: transparent;
border: 1px solid var(--primary-color);
border-left: 0;
}
.form-control:focus + .input-group-text{
border: 1px solid var(--primary-color);
}
.form-control:focus + fa-icon{
color: var(--primary-color);
}
I tried multiple variations of the selector above but i am still unable to change this to the wanted state. I am using bootstrap 5 in angular.
There is a small gap between div content and it's border (on chromium-based browsers). Is there a way to remove it?
codepen
image
.group {
border: solid 3px #580210;
box-sizing: border-box;
display: inline-flex;
border-radius: 10px;
overflow: hidden;
}
.input[type=radio] {
display: none;
}
.label {
display: inline-block;
color: #580210;
cursor: pointer;
font-family: 'Kavivanar', cursive;
font-weight: bold;
padding: 5px 20px;
font-size: 20px;
transition: background-color 0.2s;
user-select: none;
}
.input[type=radio]:checked+.label {
color: #f5b339;
background: #580210;
}
.label+.input[type=radio]+.label {
border-left: solid 3px #580210;
}
<div class="group">
<input type="radio" id="option-normal" name="selector" class="input">
<label for="option-normal" class="label">Normal</label>
<input type="radio" id="option-normal2" name="selector" class="input">
<label for="option-normal2" class="label">Normal2</label>
<input type="radio" id="option-normal3" name="selector" class="input">
<label for="option-normal3" class="label">Normal3</label>
</div>
Maybe change the background-color of the <div calss="group"> to be #580210 instead of white and than overwrite the label styles to be white to make it look the same ?
Hot to change standard input fields to an image?
<input class="FeedBack" type="text" placeholder="Full name"><br>
<input class="FeedBack" type="email" placeholder="mail#mail.ru"><br>
<textarea class="FeedBack" cols="30" rows="10"></textarea><br>
https://jsfiddle.net/5fnvt1mu/
I want to use this image instead of standart input field
https://ibb.co/3dwx295
You would need to use CSS to style the input field.
.FeedBack {
border-radius: 10px;
width: 450px;
padding: 20px 10px;
border: 1px solid lightblue; /*change to whatever colour you want */
color: lightgray; /*change to whatever colour you want */
}
This one looks to be:
.FeedBack {
border-radius: 10px;
width: 450px;
padding: 20px 10px;
border: 1px solid lightblue; /*change to whatever colour you want */
color: lightgray; /*change to whatever colour you want */
}
<input class="FeedBack" type="text" placeholder="Full name"><br>
<input class="FeedBack" type="email" placeholder="mail#mail.ru"><br>
<textarea class="FeedBack" cols="30" rows="10"></textarea><br>
I have a 2 text boxes. when I focus on 1st textbox. I get border but when I focus on 2nd textbox I don't get border-top. I have given border-top:none to the 2nd textbox as 1st textbox's border-bottom mixes with the 2nd textbox border-top.
I want to solve this issue using only CSS3.
.form-control{
padding:6px 12px;
border:thin black solid;
}
.form-control:focus{
border:thin green solid;
}
.add_url .form-control{
padding:6px 12px;
border:thin black solid;
border-top:none;
}
.add_url .form-control:focus{
border:thin green solid;
border-top:none;
}
<input type="text" class="form-control" placeholder="enter url 1">
<div class="add_url">
<input type="text" class="form-control" placeholder="enter url 2">
</div>
PS : When I focus on any of the text box , I should get border to be green to all around the textbox.
Any help would be great.
Thank you.
Don't hide the 2nd box border, just position it under the 1st. When one of the boxes is focused use the outline to highlight it, and bring it to the top, so it won't be under the other box:
.form-control {
position: relative;
padding: 6px 12px;
border: thin black solid;
}
.form-control:focus {
border: thin green solid;
}
.add_url .form-control {
top: -1px;
padding: 6px 12px;
border: thin black solid;
}
.form-control:focus {
outline: 1px green solid;
outline-offset: -1px;
z-index: 1;
}
<input type="text" class="form-control" placeholder="enter url 1">
<div class="add_url">
<input type="text" class="form-control" placeholder="enter url 2">
</div>
i think this is the best way :
HTML :
<input type="text" placeholder="enter url 1">
<div class="add_url">
<input type="text" placeholder="enter url 2">
</div>
CSS :
input {
padding:6px 12px;
border:2px black solid;
outline: 0;
position: relative;
z-index: 0;
}
input:focus{
border:2px green solid;
z-index: 1;
}
.add_url input { margin-top: -2px; }
Example: Create an form-control:focus in css and set the border as green and outline:none and z-index:1
.form-control{
padding:6px 12px;
border:thin black solid;
}
.form-control:focus {
padding:6px 12px;
border:thin green solid;
outline:none;
z-index:1;
}
<div class="add_url">
<input type="text" class="form-control" placeholder="enter url 1">
<input type="text" class="form-control" placeholder="enter url 2">
</div>
I am trying to style a radio button, I am replacing the circle with a background image, when the user clicks it the container the button is in is supposed to have an inner box shadow appear.
I styled the spans grey for simplicity, assume the grey color is a background-image
Fiddle: http://jsfiddle.net/CF5qc/
HTML
<div class="contain">
<span>
<input type="radio" name="test" value="1">
<label></label>
</span>
<span>
<input type="radio" name="test" value="2">
<label></label>
</span>
<span>
<input type="radio" name="test" value="3">
<label></label>
</span>
</div>
CSS
.contain { width: 300px; margin: 10px auto; overflow:hidden;border: 1px solid #e5e5e5; }
span {
display:block; width:100px; height:100px; border-right: 1px solid #e5e5e5;
-webkit-box-sizing: border-box; -moz-box-sizing:border-box; box-sizing: border-box; float:left;
}
span:last-of-type { border:none; }
input { width:20px;height:20px;margin:40px; }
input[type=radio]{display:none;}
label {
width:100%;height:100%;display:block; background-color: #f8f8f8; cursor:pointer;
}
input[type=radio]:checked + label {
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}
Your labels aren't associated with any elements. To make this trick work, you'll need to assign the radio buttons an ID and use the for attribute on the labels to pair them up.
<input type="radio" name="test" value="1" id="rb1" checked />
<label for="rb1"></label>