I have an input field that has a gradient border, but the text inside is too close to it.
And I have already tried padding-left, but that made the border on the left bigger, and the text was still close to the border.
The picture of the input field:
.inputfield {
margin-top: 5px;
-moz-appearance: none;
outline:0;
width: 170px;
height: 40px;
font-family: 'Montserrat', sans-serif;
color: white;
position: relative;
padding: 5px;
background-color: rgb(11, 15, 31);
border: solid 0.5px transparent;
border-radius: 80px;
background-image: linear-gradient(rgb(11, 15, 31), rgb(11, 15, 31)), radial-gradient(circle at top
left, rgb(76, 133, 242),rgb(144, 104, 235));
background-origin: border-box;
background-clip: content-box, border-box;
}
This is what it does when add padding-left
You could introduce a wrapper element around your input. A quick example built into your existing code would look something like this:
.input-wrapper {
width: 170px;
height: 40px;
padding: 5px;
border-radius: 80px;
background-image: linear-gradient(rgb(11, 15, 31), rgb(11, 15, 31)), radial-gradient(circle at top
left, rgb(76, 133, 242),rgb(144, 104, 235));
background-clip: content-box, border-box;
display: flex;
align-items: center;
}
.input-field {
outline: 0;
background-color: transparent;
color: white;
border: none;
width: 100%;
margin: 0 10px;
font-size: 16px;
}
<div class="input-wrapper">
<input class="input-field" value="TEXT">
</div>
Simply add padding-left to input[type=text].
Related
I was applying a border to this input field along with a gradient:
(https://i.stack.imgur.com/eTqQP.png)
,however because i applied some padding now it is very thick on the left side of the border when i hover the input
Here is the css code:
#input2:hover {
border:2px double transparent;
border-radius: 5px;
background-image: linear-gradient(white,white),
linear-gradient(45deg, #63589A,#5e138d);
background-origin: border-box;
background-clip: content-box,border-box;
cursor: pointer;
}
input {
padding-left: 5px;
border-radius: 5px;
border-color: rgba(237, 237, 237, 255);
}
I want the left- side to look the same as the other border-sides.
Would appreciate it if someone helped me on this!
Use padding-box inside the background-clip instead of content-box
input {
border: 3px solid transparent;
border-radius: 5px;
background-image:
linear-gradient(white, white),
linear-gradient(45deg, #63589A, #5e138d);
background-origin: border-box;
background-clip: padding-box, border-box;
cursor: pointer;
padding: 5px 30px;
font-size: 20px;
outline-offset: 4px;
}
<input type="text" placeholder="some text">
Is this what you were trying to achieve?
#input2 {
padding-left: 5px;
cursor: pointer;
font-family: monospace;
width: 200px;
height: 30px;
}
.input-container {
display: flex;
border-radius: 5px;
width: max-content;
border-color: rgba(237, 237, 237, 255);
padding: 2px;
}
.input-container:hover {
border: none;
background-image: linear-gradient(white, white), linear-gradient(45deg, #63589A, #5e138d);
background-origin: border-box;
background-clip: content-box,border-box;
}
<div class="input-container">
<input id="input2" type="text" placeholder="e.g. 1234 5678 9123 0000"/>
</div>
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>
I did not use the standard approach in CSS, is there a more semantically correct approach and moree cross-browser to solving such problems?
Problems:
Many code.
Using the property ::after (I think this is superfluous).
The button has a fixed size.
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background: #050B1F;
}
#button-continue {
margin-top: 46px;
width: 331px;
height: 54px;
border: 3px solid transparent;
border-radius: 56px;
background-color: rgba(11, 27, 55, 1);
position:relative;
cursor:pointer;
}
#button-continue::after {
content: "";
width:337px;
height:60px;
position:absolute;
z-index:-5;
top:-6px;
left:-6px;
border-radius: 56px;
background-image: radial-gradient(circle closest-side at 40% -40px, rgba(255, 255, 255, 1), rgba(31, 119, 200, 1) 120px);
}
.button-continue__text {
text-transform: uppercase;
font-size: 0.875em;
color: #99CEFF;
font-weight: 400;
}
.button-continue__text::after {
content: url('img/icon-continue.svg');
position: relative;
top: 3px;
left: 10px;
}
<button id="button-continue">
<span class="button-continue__text">Continue</span>
</button>
I found this example online.
By using this you can avoid using a pseudo-element. But the problem I found was that the created border-image does not bend around the border-radius. So this is probably not what you are looking for.
Using a plain-coloured border would work, but the background image is not made to work with rounded borders. So what you did is probably the way to do it.
I'll just include my code for completeness, but be warned.
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background: #050B1F;
}
#button-continue {
margin-top: 46px;
width: 331px;
height: 54px;
border-width: 3px;
border-style: solid;
border-radius: 56px;
border-image: radial-gradient(circle closest-side at 40% -40px, rgba(255, 255, 255, 1), rgba(31, 119, 200, 1) 120px) 1 round;
background-color: rgba(11, 27, 55, 1);
position: relative;
cursor: pointer;
overflow: hidden;
}
.button-continue__text {
text-transform: uppercase;
font-size: 0.875em;
color: #99CEFF;
font-weight: 400;
}
<button id="button-continue">
<span class="button-continue__text">Continue</span>
</button>
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 currently creating a UL menu, and I'm having some difficulties. Whenever I am trying to move down the text in the LI it is making the div bigger.
HTML Code:
<ul class="accordion">
<li class="files">
Dashboard<span>0</span>
</li>
</ul>
CSS Code:
.accordion li > a {
display: block;
position: relative;
min-width: 110px;
padding: 0 20px 0 50px;
height: 50px !important;
color: #C8C8C8;
font: bold 12px/32px Arial, sans-serif;
text-decoration: none;
}
So whenever I change the padding to this:
padding: 5px 20px 0 50px;
It makes the div 55px in height, when it should be 50px. Hope someone can help me with this! Thank you.
Here is how box-sizing/padding and line-height work. My personal opinion is that line-height is the best option and a lot more easy to calc.
They can be used together for a truly awesome combo!
Line-height/Padding CSS
.lH {
width: 80px;
height: 50px;
text-align: center;
display: block;
border-radius: 5px;
border: 2px solid rgba(0, 0, 0, 0.4);
background: #ff7200;
line-height: 50px;
margin-bottom: 50px;
}
Box-sizing CSS
.bS {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 80px;
height: 50px;
text-align: center;
display: block;
border-radius: 5px;
border: 2px solid rgba(0, 0, 0, 0.4);
background: mediumSeaGreen;
padding: 12px 0;
}
JSFIDDLE