I have a form with the following code using React in Javascript:
import React from 'react';
import { FiSend } from 'react-icons/fi';
export default function SubscriptionForm() {
return (
<div className="subscription-form">
<form>
<input
type="text"
className="subscription-form__input-field"
placeholder="Je e-mailadres"
/>
<button className="subscription-form__subscribe-button">Submit</button>
</form>
</div>
);
}
here's the css for the form:
/*
subscription form
*/
.subscription-form {
width: 100%;
line-height: 200px;
display: flex;
justify-content: center;
}
.subscription-form__input-field {
height: 45px;
width: 400px;
padding-left: 10px;
border: 1px solid white;
}
.subscription-form__input-field::placeholder {
color: black;
}
.subscription-form__input-field:focus {
outline: none;
box-shadow: none;
}
.subscription-form__subscribe-button {
height: 45px;
border: 0;
background: red;
}
I gave both the button and the text input the same height of 45 px but in my browser it appears like this:
.subscription-form__input-field {
border: 1px solid white; /* You have border here. Pls remove this */
}
Related
I'm struggling with how to make my input field 100% width and centered and also have the "Add" button centered but displayed underneath the input field. I just need this part of the application to be responsive for mobile devices. I also plan to centre the other button when I get to that stage. Does anyone have any idea? Thanks in advance.
#media only screen and (max-width: 965px) {
body {
background-color: lightblue;
color: #fff;
}
.app {
margin: 2.5%;
border: 1px solid #4CAF50;
} /* main div */
.header {
border: 1px solid #4CAF50;
text-align: centre;
font-family: 'Open Sans', sans-serif;
} /* title div */
.title {
text-align: center;
font-size: 40px;
} /* title */
.input {
width: 100%;
border: 1px solid #4CAF50;
} /* input tasks div */
::-webkit-input-placeholder {
text-align: center;
}
.input input,
.input-btn,
.item-text,
.action-btns,
.edit-input {
font-size: 20px;
}
.input-btn {
background-color: #23ba42;
color: #F1F1F1;
} /* add button */
.todo-list {
border: 1px solid #4CAF50;
margin-top: 40px;
width: 100%;
} /* to-do list div */
.item {
margin-bottom: 40px;
border-bottom: 2px solid red;
} /* individual tasks within to-do list */
.item-text {
width: 100%;
text-align: center;
} /* task text */
.action-btns {
text-align: center;
} /* task action buttons div */
.action-btn {
display: block;
justify-content: center;
align-items: center;
} /* individual action buttons */
.remove-btn {
background-color: #ce0a0a;
color: #f1f1f1;
font-size: 18px;
}
.edit-btn {
background-color: #cb960d;
color: #f1f1f1;
font-size: 18px;
}
.update-btn {
background-color: #23ba42;
color: #f1f1f1;
font-size: 18px;
}
.edit-input {
width: 100%;
text-align: center;
}
.hide{
display: none;
} /* hides input field for editing to-do tasks */
}
<center><div class="input">
<input type="text" name="todo-input" id="todo-input" class="input-element" placeholder="What do you need to do?" />
<br>
<button type="button" name="add-btn" id="add-btn" class="input-btn">
Add
</button></div> </center>
<center><div class="input">
<input type="text" name="todo-input" id="todo-input" class="input-element" placeholder="What do you need to do?" />
<br>
<button type="button" name="add-btn" id="add-btn" class="input-btn">
Add
</button></div> </center>
Aru u looking for this Try it And tell me if it Worked for u
See I am Getting Add Button in center Underneath the Input Tag
I'm trying to create a simple bordered form that has a button and input of type="text" inside of it.
There is this spacing that appears that I cannot remove.
main {
display: flex;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
}
main form {
display: flex;
border: 2px solid green;
}
main form .btndep {
display: block;
padding: 10px;
background: green;
border: 0;
box-shadow: none;
outline: none;
}
main form input {
border: 0;
outline: none;
box-shadow: none;
text-align: right;
padding-left: 5px;
padding-right: 5px;
}
<main>
<form class="deposit">
<button class="btndep">Deposit</button>
<input type="text" placeholder="0.00€">
</form>
</main>
there is a way around it; it seems... outline instead of border
I have the below code to make a login form but i cant get the checkbox label to be like always against the edge of the text area. I always sits to the right of the text area. I cant get it to be dependant on the div it is in. On inspection it sits outside the div.
Different things i have tried have included giving the label a left value but this messes it up when the screen size changes.
I want something like this
Here is a jsfiddle if this is easier
function showHidePassword() {
var x = document.getElementById("pass");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
body {
background-color: #ffffff;
}
* {
box-sizing: border-box;
}
input[type=text],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
input[type=password],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container1 {
border-radius: 25px;
background-color: #f2f2f2;
padding: 40px;
position: center;
margin: 15% 30%;
}
.signup {
border-radius: 25px;
background-color: #f2f2f2;
padding: 40px;
position: center;
opacity: 0.96;
}
.container1 .new-body {
background: #f2f2f2;
}
.signup .new-body {
background: #f2f2f2;
}
.signup .row {
padding-top: 5px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 65%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.col-25,
.col-75,
input[type=submit] {
width: 100%;
margin-top: 0;
}
.col-70,
input[type=submit] {
width: 95%;
margin-top: 0;
}
}
.passw {
cursor: pointer;
width: 30px;
height: 20px;
}
.col-75 label {
padding-top: 16px;
position: absolute;
z-index: 100;
}
<form>
<div class="row">
<div class="col-25">
<label for="pass">Password</label>
</div>
<div class="col-75">
<input type="password" id="pass" name="password" minlength="5" pattern="[A-Za-z][A-Za-z0-9]*[0-9][A-Za-z0-9]*" placeholder="Password" title="A valid password is a set of 5 characters, each consisting of an
upper or lower-case letter, or a digit. The password must begin with a letter and contain at least one digit" autocomplete="current-password" required>
<label for="passShowIcon" id="showHide"><input name="passShowIcon" type="checkbox" class="passw" onclick="showHidePassword();">
<span class=" "></span></label>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
If you wanted to make sure the checkbox appears inside the text input. You could wrap both input fields with a relative class, and then apply absolute positioning to the checkbox.
Like so:
https://jsfiddle.net/x0o46g7a/2/
.wrapper {
position: relative;
}
.text {
width: 100%;
height: 100%;
}
.checkbox {
position: absolute;
top: -8px;
right: -8px;
}
Something to note:
I would recommend adding some padding-right to your text input, to make sure it's text does not overlap/underlap the absolute positioned checkbox.
Based on your code, add the following rules in your css.
float: right to .col-75 instead of float left
right: 0 to .col-75 label
those will ensure that checkbox will remain inside the input field.
I'm trying to make an input field with a button and custom sprite image inside of it.
The input should change the border color and show the button with an
icon while hovering. Additionally while hovering both input and
button, the icon should be changed.
Right now the icon changes with input:focus while dismissing the border of the input.
If somebody can guide me in the right direction, it would be greatly appreciated.
Here's what I came up so far:
HTML
<form class="b-editor-item col-3">
<input type="text" placeholder="D" class="b-editor-d-input" />
<button type="button" class="b-editor-button-delete">
<div class="b-editor-icon-trash"></div>
</button>
</form>
SCSS
input[type="text"] {
border: 1px solid transparent;
}
.b-editor {
&-item {
display: flex;
align-items: center;
}
&-button-delete {
border: none;
height: 24px;
width: 24px;
overflow: hidden;
background-color: transparent;
}
&-d-input {
color: black;
background-color: #eaeaea;
border-radius: 6px;
width: 90%;
margin-right: -3.25rem;
height: 2rem;
}
&-icon-trash {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1044597/trash.png);
background-repeat: no-repeat;
background-position: -28px 0;
background-size: 300%;
height: 20px;
width: 20px;
padding: 5px 2px;
}
&-d-input:hover + &-button-delete:hover > &-icon-trash,
&-d-input:focus + &-button-delete:hover > &-icon-trash {
background-position: -52px 0;
}
&-d-input + &-button-delete {
display: none;
}
&-d-input:hover + &-button-delete,
&-d-input:focus + &-button-delete,
&-d-input:hover + &-button-delete:hover {
display: block;
}
&-d-input:hover,
&-d-input:hover + &-button-delete:hover {
border: 1px solid #00c8aa !important;
}
}
Try to add these 2 rules:
button.b-editor-button-delete:hover {
display: block;
}
button.b-editor-button-delete:hover .b-editor-icon-trash {
background-position: -52px 0;
}
I'm trying to put a span inside of a text input to prefix it with the "$" character, to represent a dollar amount.
To do this, I'm using a label element containing the "$" span along with the actual input, which is set to 100% width. The label element is styled to look like a text box.
This works fine in Chrome and IE, however in Firefox it seems that setting 100% width on the input does not take the span into consideration, and therefore extends past the actual label element's boundaries:
Code Example:
.container { width: 400px; }
.w70 { width: 70px; }
.input-with-label {
border: 1px solid #D9D9D9;
display: flex;
align-items: center;
background-color: #fff;
}
.input-with-label.-dollar-amount > input[type='text'] {
text-align: right;
font-weight: 600;
}
.input-with-label > input[type='text'] {
margin: 0;
border: none;
width: 100%;
}
.input-with-label > .input-label {
padding-left: 3px;
font-size: 10px;
border: none;
}
<div class="container">
<label class="input-with-label -dollar-amount w70">
<span class="input-label">$</span>
<input type="text" value="0.00" />
</label>
</div>
Doesn't setting min-width:0 to the input and making it use all available width via flex:1 solve the problem?
.container { width: 400px; }
.w70 { width: 70px; }
.input-with-label {
border: 1px solid #D9D9D9;
display: flex;
align-items: center;
background-color: #fff;
}
.input-with-label.-dollar-amount > input[type='text'] {
text-align: right;
font-weight: 600;
}
.input-with-label > input[type='text'] {
margin: 0;
border: none;
min-width: 0;
flex: 1;
}
.input-with-label > .input-label {
padding-left: 3px;
font-size: 10px;
border: none;
}
<div class="container">
<label class="input-with-label -dollar-amount w70">
<span class="input-label">$</span>
<input type="text" value="0.00" />
</label>
</div>
I used another method
.currencyinput span{
position: relative;
}
.currencyinput input{
padding-left:20px;
}
.currencyinput span{
left:15px;
top:0
position: absolute;
}
input{
border:1px solid lightgray;
line-height:30px;
}
<span class="currencyinput"><span>$</span><input type="text" name="amount"></span>