I have two text fields inside of a form. When either input field is selected the outline for that field turns white. I need to change this color. How can I achieve this?
input[type=text], input[type=password] {
width: 65%;
padding: 12px 20px;
padding-top: 10px;
margin: 4px 85px;
display: inline-block;
border: 1px solid rgba(115, 82, 122, 0.486);
box-sizing: border-box;
background-color: rgb(33, 33, 34);
color:rgba(175, 149, 35, 0.836);
font-size: 18px;
/* border-color: rgb(63, 15, 15); */
}
In the solution below, when the focus event of the <input> elements occurs, the border style is assigned a value and the border color of the <input> element is changed.
body {
background-color: black;
}
input[type=text], input[type=password] {
width: 65%;
padding: 12px 20px;
padding-top: 10px;
margin: 4px 85px;
display: inline-block;
border: 1px solid rgba(115, 82, 122, 0.486);
box-sizing: border-box;
background-color: rgb(33, 33, 34);
color:rgba(175, 149, 35, 0.836);
font-size: 18px;
}
input[type=text]:focus, input[type=password]:focus {
outline: none !important;
border: 1px solid red;
}
<body>
<form>
<input type="text">
<input type="password">
</form>
</body>
Your version is still right. you can use with a class
body {
background-color: #2a2f3f;
}
.text-control {
display: block;
width: 30%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
outline: none;
line-height: 1.5;
color: #0c3d13;
background-color: #538976;
background-clip: padding-box;
border: 2px solid yellow;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.text-control:hover {
border: 2px solid green;
background-color: red;
}
.text-control:focus {
border: 2px solid #00ba4a;
background-color: #1c6b3c;
}
<form>
<input class="text-control" type="text" name="">
</form>
Related
currently I have encountered a project that needs to change the background color of the input checkbox to black. I searched for some information on the Internet but I still can’t successfully change the color. Would you like to help me find out what went wrong?
input[type=checkbox] {
background-color: #222;
padding: 3px 6px;
border: 1px solid red;
color: #fff;
user-select: none; /* 防止文字被滑鼠選取反白 */
}
input[type=checkbox]:checked:after {
display: inline-block;
content:"";
color: #fff;
background-color:#222;
}
/* input[type=checkbox]:checked:after {
content: "X";
background-color: #FFFFFF;
font-size: 12px;
text-align:center;
} */
<input type="checkbox"><label for="enter-send" class="enter-send"> Enter </label>
You have to write custom CSS to style checkboxes.
/* This css is for normalizing styles. You can skip this. */
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.new {
padding: 50px;
}
.form-group {
display: block;
margin-bottom: 15px;
}
.form-group input {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.form-group label {
position: relative;
cursor: pointer;
}
.form-group label:before {
content:'';
-webkit-appearance: none;
background-color: transparent;
border: 2px solid black;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
padding: 10px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
margin-right: 5px;
}
.form-group input:checked + label:before {
background: black;
}
.form-group input:checked + label:after {
content: '';
display: block;
position: absolute;
top: 2px;
left: 9px;
width: 6px;
height: 14px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
<div class="new">
<form>
<div class="form-group">
<input type="checkbox" id="html">
<label for="html">HTML</label>
</div>
<div class="form-group">
<input type="checkbox" id="css">
<label for="css">CSS</label>
</div>
<div class="form-group">
<input type="checkbox" id="javascript">
<label for="javascript">Javascript</label>
</div>
</form>
</div>
So I have 2 buttons inside a flexbox with a transition on hover that makes the button shrink in padding and darken. The only problem is that when I hover over one button and the transition performs, it moves the other button as well. How do I fix this.
TL;DR I don't want the other button to move when I :hover.
.buttons {
margin-top: 3rem;
display: flex;
justify-content: space-evenly;
}
.buttons__change {
/*👉left: 25%;
position: relative;👈*/
font-family: "Roboto", sans-serif;
padding: 12px 52px;
background: white;
border: 2px solid rgb(201, 83, 5);
color: rgb(201, 83, 5);
font-size: 1.5rem;
text-decoration: none;
-webkit-appearance: none;
}
.buttons__pay {
/*👉left: 45%;
position: relative;👈*/
font-family: "Roboto", sans-serif;
padding: 12px 52px;
background: rgb(201, 83, 5);
border: 2px solid rgba(201, 83, 5);
color: white;
font-size: 1.5rem;
text-decoration: none;
-webkit-appearance: none;
cursor: pointer;
}
.buttons__change:hover,
.buttons__change:focus,
.buttons__pay:hover,
.buttons__pay:focus {
background-color: rgb(209, 179, 124);
opacity: .7;
color: gray;
cursor: pointer;
padding: 8px 28px;
-webkit-transition: .45s .08s;
-o-transition: .45s .08s;
transition: .45s .08s;
}
<div class="buttons">
<a class="buttons__change" href="services.html">Change Selection</a>
<button class="buttons__pay" type="submit">Secure Checkout</button>
</div>
You changed the padding, so elements that flow around it will adjust to the new spacing they need to flow around. The easiest solution is to account for the missing padding with an equal-sized margin.
The HTML box drawing has padding inside the box and margin outside the box, so you get the desired effect.
To be explicit, I set a zero margin on each button (which you could abstract btw—there's no need to duplicate any entries, that just makes them harder to update) and then added the pixels removed from the padding on :hover.
.buttons {
margin-top: 3rem;
display: flex;
justify-content: space-evenly;
}
.buttons__change {
/*👉left: 25%;
position: relative;👈*/
font-family: "Roboto", sans-serif;
padding: 12px 52px;
margin: 0;
background: white;
border: 2px solid rgb(201, 83, 5);
color: rgb(201, 83, 5);
font-size: 1.5rem;
text-decoration: none;
-webkit-appearance: none;
}
.buttons__pay {
/*👉left: 45%;
position: relative;👈*/
font-family: "Roboto", sans-serif;
padding: 12px 52px;
margin: 0;
background: rgb(201, 83, 5);
border: 2px solid rgba(201, 83, 5);
color: white;
font-size: 1.5rem;
text-decoration: none;
-webkit-appearance: none;
cursor: pointer;
}
.buttons__change:hover,
.buttons__change:focus,
.buttons__pay:hover,
.buttons__pay:focus {
background-color: rgba(209, 179, 124);
opacity: .7;
color: gray;
cursor: pointer;
padding: 8px 28px;
margin: 4px 24px;
-webkit-transition: .45s .08s;
-o-transition: .45s .08s;
transition: .45s .08s;
}
<div class="buttons">
<a class="buttons__change" href="services.html">Change Selection</a>
<button class="buttons__pay" type="submit">Secure Checkout</button>
</div>
I didn't want to change anything else about your code, but I do recommend the hovered buttons have at least as high a contrast as the buttons do before hovering. Legibility shouldn't decrease when your attention is focused on the button. (Try background-color: rgba(209, 179, 124, 0.7); color: black; for example. This ensures the text color isn't rendered 30% transparent (from your opacity: .7;) while the background color is.)
Is there a simple way to fix this crooked rendering for checkboxlist?
This code:
<?= $form->field($model, 'targeting_gender')->checkboxList(['Male'=>'Male','Female'=>'Female','Unknown'=>'Unknown']) ?>
ends up in this:
The Problem is the differentiated lenghth of the labels.
Here is some CSS of the checkboxes:
type="checkbox"]:not(:checked), [type="checkbox"]:checked {
position: absolute;
opacity: 0;
pointer-events: none;
}
[type="checkbox"], [type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
input[type="checkbox" i] {
background-color: initial;
cursor: default;
appearance: checkbox;
box-sizing: border-box;
margin: 3px 3px 3px 4px;
padding: initial;
border: initial;
}
input {
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
color: -internal-light-dark(black, white);
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
appearance: textfield;
background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
-webkit-rtl-ordering: logical;
cursor: text;
margin: 0em;
font: 400 13.3333px Arial;
padding: 1px 2px;
border-width: 2px;
border-style: inset;
border-color: -internal-light-dark(rgb(118, 118, 118), rgb(195, 195, 195));
border-image: initial;
}
PS: I'm using materializecss
My quick fix (because I'm not an CSS expert) is that:
<?= $form->field($model, 'targeting_gender')->checkboxList(
['Male'=>'Male ','Female'=>'Female ','Unknown'=>'Unknown'],
['encode'=>false])
?>
Which results in:
But if you have time and energy you could mess around with adding html-attributes to the labels and additional css:
<?= $form->field($model, 'targeting_gender')->checkboxList(
['Male'=>'Male','Female'=>'Female','Unknown'=>'Unknown'],
['encode'=>false, 'itemOptions'=>['labelOptions'=>['class'=>'fixed-width-label']]])
?>
I tried to get an input field with an submit-button inside it. Instead of using the "normal" submit button, I tried to insert a small icon into the input-field, but without any success. I wasn't able to get the image (dimensions 30*30 pixels) inside my input-field.
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
position: relative;
width: 200px;
height: 36px;
box-sizing: border-box;
border: 2px solid #4d7fc3;
border-radius: 4px;
font-size: 16px;
background-color: white;
padding: 2px 2px 2px 10px;
}
input[type=submit] {
position: absolute
width: 30px;
height: 30px;
top: 0px;
right: 0px;
/* background-color: #4d7fc3; */
border: none;
color: white;
background-image: url('file:///C|/Users/heilemann/Pictures/LoginPfeil.JPG');
display: block;
background-position: 100px 100px 100px 100px; */
/* background-repeat: no-repeat; */
/* padding: 2px 2px 2px 30px; */
z-index: -1;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<p>Input with icon:</p>
<form>
<div id="Search">
<input type="text" name="search" placeholder="Search..">
<input type="submit" value="">
</div>
</form>
</body>
</html>
It should look like this:
There were quite a few errors in the code you pasted up above which weren't doing you any favors.
You left out a ; after the position: absolute; property in your submit input. In order to then have that element positioned properly, you need the parent container to be position: relative;. In this case, the parent container was #Search.
Once that was taken care of there was quite a few properties that could be removed due to being unnecessary. See if my code below helps...
#Search {
position: relative;
display: inline-block;
}
input[type=text] {
position: relative;
width: 200px;
height: 36px;
box-sizing: border-box;
border: 2px solid #4d7fc3;
border-radius: 4px;
font-size: 16px;
background-color: white;
/* 40px padding to account for submit */
padding: 2px 40px 2px 10px;
}
input[type=submit] {
position:absolute;
width: 30px;
height: 100%;
top: 0px;
right: 0px;
border: none;
color: white;
background: url('file:///C|/Users/heilemann/Pictures/LoginPfeil.JPG') #4d7fc3 center center no-repeat;
display: block;
cursor: pointer;
}
Working codepen here.
Just a heads up that your background image for the submit is referencing a local file on your machine, so no one else can actually see it other than you. Be sure to assign it the correct path in relation from the index.html file.
Hope this helps.
Here it is done with HTML and CSS.
/*Clearing Floats*/
.cf:before, .cf:after{
content: "";
display: table;
}
.cf:after{
clear: both;
}
.cf{
zoom: 1;
}
/* Form wrapper styling */
.form-wrapper {
width: 450px;
padding: 15px;
margin: 150px auto 50px auto;
background: #444;
background: rgba(0, 0, 0, .2);
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}
/* Form text input */
.form-wrapper input {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, .8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
/* Form submit button */
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: #d83c3c;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}
.form-wrapper button:hover{
background: #e54040;
}
.form-wrapper button:active,
.form-wrapper button:focus{
background: #c42f2f;
outline: 0;
}
.form-wrapper button:before { /* Left arrow */
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before{
border-right-color: #e54040;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before{
border-right-color: #c42f2f;
}
.form-wrapper button::-moz-focus-inner { /* Remove extra button spacing for Mozilla Firefox */
border: 0;
padding: 0;
}
<form class="form-wrapper cf">
<input type="text" placeholder="Search..." required>
<button type="submit">Search</button>
</form>
tried both variants, both variants will work, second solution comes clothest
I am trying to create a button that shows a loading spinner when waiting for a response. But there is some weird things going on which I do not understand at all.
I have the following HTML with a bunch of CSS:
<button type="submit" disabled="true" class="btn btn-blue btn-loading">
<div class="btn-loading-text">Update profile</div>
<div class="btn-loading-spinner"></div>
</button>
If you comment out the spinner element, then the "Update profile" aligns itself in the center even tho I did not ask it to.
* {
box-sizing: border-box;
}
.btn-loading {
border-radius: 2px;
font-size: 13px;
font-family: arial, helvetica, sans-serif;
text-decoration: none;
display: inline-block;
font-weight: bold;
outline: 0;
background: #f5f5f5 !important;
border: 1px solid #ddd !important;
color: #aaa !important;
cursor: default !important;
overflow: hidden;
height: 40px;
}
.btn-loading-text {
float: left;
margin: 0px 15px 0px 15px;
}
.btn-loading-spinner {
float: left;
height: 25px;
width: 25px;
margin: 7px 15px 6px -5px;
position: relative;
animation: rotation .9s infinite linear;
border-left: 3px solid #ddd;
border-right: 3px solid #ddd;
border-bottom: 3px solid #ddd;
border-top: 3px solid #aaa;
border-radius: 100%;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
<button type="submit" disabled="true" class="btn-loading">
<div class="btn-loading-text">Update profile</div>
<!--<div class="btn-loading-spinner"></div>-->
</button>
But when the spinner element is there it suddently goes to the top. I have no idea what's going on.
* {
box-sizing: border-box;
}
.btn-loading {
border-radius: 2px;
font-size: 13px;
font-family: arial, helvetica, sans-serif;
text-decoration: none;
display: inline-block;
font-weight: bold;
outline: 0;
background: #f5f5f5 !important;
border: 1px solid #ddd !important;
color: #aaa !important;
cursor: default !important;
overflow: hidden;
height: 40px;
}
.btn-loading-text {
float: left;
margin: 0px 15px 0px 15px;
}
.btn-loading-spinner {
float: left;
height: 25px;
width: 25px;
margin: 7px 15px 6px -5px;
position: relative;
animation: rotation .9s infinite linear;
border-left: 3px solid #ddd;
border-right: 3px solid #ddd;
border-bottom: 3px solid #ddd;
border-top: 3px solid #aaa;
border-radius: 100%;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
<button type="submit" disabled="true" class="btn-loading">
<div class="btn-loading-text">Update profile</div>
<div class="btn-loading-spinner"></div>
</button>
The content of a button element are vertically aligned to the middle.
When you only have .btn-loading-text, that element is 16px tall, and the button is 38px tall, so .btn-loading-text is aligned to the middle.
However, when you also include .btn-loading-spinner, which is 38px tall (including borders and margins), the content of the button is as tall as the tallest of the elements, so 38px. So the alignment to the middle is not noticeable.
If you want to align each element to the middle, instead of aligning the content as a whole, you can use display: inline-block instead of float: left, and vertical-align: middle.
.btn-loading-text, .btn-loading-spinner {
float: none; /* Initial value */
display: inline-block;
vertical-align: middle;
}
* {
box-sizing: border-box;
}
.btn-loading {
border-radius: 2px;
font-size: 13px;
font-family: arial, helvetica, sans-serif;
text-decoration: none;
display: inline-block;
font-weight: bold;
outline: 0;
background: #f5f5f5 !important;
border: 1px solid #ddd !important;
color: #aaa !important;
cursor: default !important;
overflow: hidden;
height: 40px;
}
.btn-loading-text, .btn-loading-spinner {
display: inline-block;
vertical-align: middle;
}
.btn-loading-text {
margin: 0px 15px 0px 15px;
}
.btn-loading-spinner {
height: 25px;
width: 25px;
margin: 7px 15px 6px -5px;
position: relative;
animation: rotation .9s infinite linear;
border-left: 3px solid #ddd;
border-right: 3px solid #ddd;
border-bottom: 3px solid #ddd;
border-top: 3px solid #aaa;
border-radius: 100%;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
<button type="submit" disabled="true" class="btn-loading">
<div class="btn-loading-text">Update profile</div>
<div class="btn-loading-spinner"></div>
</button>