I was wondering if it's possible to change the shape of a text box, so it would be a rectangle but with the beginning of it 'taken out' ? I attached an example image.
I found about clip-path: polygon in css but it only accepts four coordinates.
Thanks in advance!
Check below codes see if this is what you want:
.field {
position: relative;
margin-bottom: 20px;
}
.field label {
position: absolute;
min-width: 100px;
border: 1px solid;
border-top-color: #fff;
border-left-color: #fff;
}
.field input[type="text"] {
padding: 10px 10px 10px 110px;
border: 1px solid;
outline: none;
}
<div class="field">
<label for="status">Status</label>
<input type="text" id="status">
</div>
<div class="field">
<label for="givenname">Given Name</label>
<input type="text" id="givenname">
</div>
<div class="field">
<label for="surname">SurName</label>
<input type="text" id="surname">
</div>
Related
The code is as follows:
.form-wrapper {
border: 1px solid rgb(68, 240, 0);
background-image: radial-gradient(rgb(252, 252, 252), #ffffff);
border-radius: 20px;
width: 400px;
position: relative;
padding: 10px 40px;
margin: 10px auto;
}
.close-button {
position: absolute;
right: 0px;
left: auto;
border: 1px solid rgb(240, 0, 0);
width: 40px;
}
.form-header {
border: 1px solid rgb(232, 0, 240);
position: relative;
text-align: center;
}
.form-header h3 {
display: inline;
}
.form-outline {
border: 1px solid rgb(237, 250, 235);
border-radius: 20px;
padding: 5px 30px;
}
.form-field {
margin-top: 5px;
}
.form-field input {
outline: none;
width: 100%;
display: block;
padding: 5px;
font-size: 15px;
border: 2px solid rgb(179, 177, 177);
border-radius: 6px;
background-color: rgba(227, 247, 250, 0.918);
}
.form-field small {
display: block;
visibility: hidden;
}
<div class="form-wrapper">
<div class="close-button"><i class="far fa-times-circle "></i></div>
<div class="form-header">
<!-- <div style="border: 2px solid aqua;"></div> -->
<h3> Lets talk!</h3>
</div>
<form class="form-outline">
<div class="form-field">
<label class="field-title">Name </label><br>
<input type="text" id="" value="" placeholder="Enter your name."> <br>
<small class="error-message">Error message</small>
</div>
<div class="form-field">
<label class="field-title">Phone </label><br>
<input type="text" id="" value="" placeholder="Enter your phone number."> <br>
<small class="error-message">Error message</small>
</div>
<div class="form-field">
<label class="field-title">Organization </label><br>
<input type="text" id="" value="" placeholder="Enter your organization's name."><br>
<small class="error-message">Error message</small>
</div>
<div class="form-field">
<label class="field-title">Address </label><br>
<input type="text" id="" value="" placeholder="Enter your address."> <br>
<small class="error-message">Error message</small>
</div>
<div class="form-field">
<label class="field-title">Email </label><br>
<input type="text" id="" value="" placeholder="Enter your email."> <br>
<small class="error-message">Error message</small>
</div>
</form>
</div>
The result looks like this.
I want to move the "close button" to the right side sticking to the green border of form-wrapper div. The right property is not working. I don't know if it is a silly mistake or lack of knowledge. Any help or direction would be appreciated.
I tested the right property using another html file and it is working perfectly. But I could not move this close button to right.
try to add this to your close-button class. it worked for me.
.close-button {
direction: rtl;
}
Your code is fine and should work propely. Maybe your styles without right: 0px; is cached by browser. Try to open your project in new private / incognito tab. It prevents browser to read cached styled.
I want to design following material design input form using css and bootstrap. Following code is I am currently using. But it doesn't provide exact result I want.
Code Pen Link : View Source Code Here
HTML CODE :
<div class="container">
<h2>Google Material Design in CSS3<small>Inputs</small></h2>
<form>
<div class="group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>
<div class="group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Email</label>
</div>
</form>
<p class="footer">
a tutorial by scotch.io
</p>
</div>
But I want this design :
CSS Only solution; use combination of sibling selector ~ on the label and :valid pseudo selector on the input.
body {
margin: 10px;
}
.form-group>label {
bottom: 34px;
left: 15px;
position: relative;
background-color: white;
padding: 0px 5px 0px 5px;
font-size: 1.1em;
transition: 0.2s;
pointer-events: none;
}
.form-control:focus~label {
bottom: 55px;
}
.form-control:valid~label {
bottom: 55px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-6">
<br>
<div class="form-group">
<input type="text" class="form-control" id="usr" required>
<label for="usr">Name</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="password" required>
<label for="usr">Password</label>
</div>
</div>
</div>
</div>
Since you've tagged Bootstrap 4, I'm assuming you wanted the solution with regards to that framework.
Setup a default form-group, label, and input markup like this;
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
Then add this css, what this would do is
position label relative to its container (form-group)
then we specified the top and left positions so that it would land
on top of the input field
I added a white background and padding to the label so that it would have a box around the label.
.form-group > label {
top: 18px;
left: 6px;
position: relative;
background-color: white;
padding: 0px 5px 0px 5px;
font-size: 0.9em;
}
Here's a fiddle with that code on bootstrap 4;
http://jsfiddle.net/rw29jot4/
For the animation, check this fiddle, we need to utilize click events and move the position of the label;
Updated code with animation;
http://jsfiddle.net/sedvo037/
EDIT: Please see my answer below which uses only CSS.
Try with this code.
HTML:
<div class="main_div">
<div class="group">
<input type="text" required="required"/>
<label>Name</label>
</div>
</div>
CSS:
.main_div{
padding: 30px;
}
input,
textarea {
background: none;
color: #c6c6c6;
font-size: 18px;
padding: 10px 10px 10px 15px;
display: block;
width: 320px;
border: none;
border-radius: 10px;
border: 1px solid #c6c6c6;
}
input:hover{
border: 3px solid black;
}
input:focus,
textarea:focus {
outline: none;
border: 3px solid black;
}
input:focus ~ label, input:valid ~ label,
textarea:focus ~ label,
textarea:valid ~ label {
top: -5px;
font-size: 12px;
color: #000;
left: 11px;
}
input:focus ~ .bar:before,
textarea:focus ~ .bar:before {
width: 320px;
}
input[type="password"] {
letter-spacing: 0.3em;
}
.group{
position: relative;
}
label {
color: #c6c6c6;
font-size: 16px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 15px;
top: 12px;
transition: 300ms ease all;
background-color: #fff;
padding: 0 2px;
}
I'm currently struggling with an aesthetic problem. My triangle button is being cut off at the right corner and it's not a sight, it's basically a right-sided trapezium.
What i did was make an input field, and aligned a triangle submit button at the end of the input field.
What's the cause of this?
.submit_btn {
display: block;
grid-row: 1;
grid-column: 1;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 17.3px;
border-color: transparent transparent transparent #bc2ac1;
background-color: transparent;
align-self: center;
justify-self: flex-end;
cursor: pointer;
}
.submit_btn:focus {
outline: none;
}
<form class="form_name" action="">
<label class="name" for="name">What's your name?</label>
<div class="input_wrapper">
<input class="name_field" type="text" name="name" placeholder="Your name">
<input class="submit_btn" type="submit" value="">
</div>
</form>
Default padding on your input element was interfering with the cool CSS border trick. Add:
padding: 0;
I changed the element to a <button> and removed all the code not directly related to styling the purple triangle. I also reformatted the triangle border trick code to make it a little clearer. This is all for demo purposes. Just adding the padding line to your code will fix it.
.submit_btn {
/* this fixes the tip of the triangle */
padding: 0;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 17.3px solid #bc2ac1;
border-right: none;
cursor: pointer;
}
<form class="form_name" action="">
<label class="name" for="name">What's your name?</label>
<div class="input_wrapper">
<input class="name_field" type="text" name="name" placeholder="Your name">
<button class="submit_btn" type="submit" value=""></button>
</div>
</form>
Add display: flex to the main container to move your triangle to right and for moving your triangle to in input field, I used translateY property.
.input_wrapper {
display: flex;
}
.submit_btn {
display: block;
grid-row: 1;
grid-column: 1;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 17.3px;
border-color: transparent transparent transparent #bc2ac1;
background-color: transparent;
align-self: center;
justify-self: flex-end;
cursor: pointer;
transform: translateX(-25px);
}
.submit_btn:focus {
outline: none;
}
<form class="form_name" action="">
<label class="name" for="name">What's your name?</label>
<div class="input_wrapper">
<input class="name_field" type="text" name="name" placeholder="Your name">
<input class="submit_btn" type="submit" value="">
</div>
</form>
I have this sample:
link
CODE HTML:
<div class="input-box">
<label for="option_159" class="required">
Patient Name <em>*</em>
</label>
<input type="text" class="optionli-input input-text product-custom-option required-entry" placeholder="Patient Name" >
</div>
I want to create something like this
example
How can I create such an example only from CSS?
Can you modify my example so I can get something like this please? I want to understand how it was created.
Thanks in advance!
Try below code:
<form>
<fieldset>
<legend>Name:</legend>
<input type="text"><br>
</fieldset>
</form>
This can be done using fieldset-legend
<div class="input-box">
<fieldset>
<legend for="option_159" class="required">Patient Name <em>*</em></legend>
<input type="text" class="optionli-input input-text product-custom-option required-entry" placeholder="Patient Name" >
</fieldset>
</div>
Use this code:
label{
position: absolute;
top: 20px;
left: 15px;
background-color: #fff;
padding: 0px 5px;
font-size: 12px;
}
input{
padding: 10px;
background-color: #fff;
}
<div class="input-box">
<label for="option_159" class="required">Patient Name<em>*</em></label>
<br/>
<input type="text" class="optionli-input input-text product-custom-option required-entry" placeholder="Patient Name" / >
</div>
Use This :
div {
position: relative;
margin: 50px;
}
div input[type] {
border: 1px solid #ccc;
outline: none;
padding: 8px;
width: 300px;
}
div label {
position: absolute;
top: -8px;
left: 10px;
background: #FFF;
color: skyblue;
font-size: 12px;
}
<div>
<label for="option_159">Patient Name<em>*</em></label>
<input type="text" id="option_159" placeholder="Patient Name">
</div>
I have a form which code looks like this:
<div id="right_sidebar">
<form id="your_name" name="your_name" action="#" method="post" style="display: block; ">
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" value="">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname">
<label for="msg">Comment <span class="sp"></span></label>
<textarea name="msg" id="msg" rows="7"></textarea>
<input type="checkbox" name="agree">
<label for="agree">Accept the terms</label>
<button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>
And which is styled with the following CSS:
body {
color: #333;
font: 12px Arial,Helvetica Neue,Helvetica,sans-serif;
}
#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}
form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}
form label {
color: #435E66;
display:block;
font-size: 12px;
}
form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}
form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}
form button.blue_button {
margin-top: 10px;
vertical-align: top;
}
button.blue_button{
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}
As you can see the checkbox is on top of the label. I would like both to be "on the same line". So, it would look like "[ ] Accept the terms". And how would I make that the text is vertically aligned to the checkbox.
How could I do both?
You can see it live here: form, checkbox failing
One option is to amend the style of the label element that follows the checkbox:
input[type=checkbox] + label {
display: inline-block;
margin-left: 0.5em;
margin-right: 2em;
line-height: 1em;
}
JS Fiddle demo.
This is, however, somewhat fragile as the margins are a little arbitrary (and the margin-right is purely to force the following button to the next line). Also the attribute-equals selector may cause problems in older browsers.
As implied, in comments, by Mr. Alien it is actually easier to target the checkbox itself with this selector-notation:
input[type=checkbox] {
float: left;
margin-right: 0.4em;
}
JS Fiddle demo.
It is because the label has display: block on it. It means that (without a float or hack) it will claim it's own line.
Change it to display: inline-block or leave the display rule away and you're done.
Seeing you did this intentionally for the first two labels, you should give the accept the terms label an id and use form #accepttermslabel {display: inline-block}. This will override the other rules et because it is more specific.
Wrap your checkbox and text within the <label> tag. Works with your current CSS as seen here in this jsFiddle Demo.
<label for="checkbox">
<input id="checkbox" type="checkbox"> My Label
</label>
Forked your fiddle here with one small change. I nested the checkbox inside the label.
<label for="agree"><input type="checkbox" name="agree">Accept the terms</label>
Hope it helps.
All you need to do is add display: inline to the label. Like this:
label[for="agree"] {
display: inline;
}
You may also have to add the following to get the Send button to stay on its own line:
button[type="submit"] {
display: block;
}
That is enough to make it work, but you could also nest the input inside the label, like this:
<label for="agree">
<input type="checkbox" name="agree" />
Accept the terms
</label>
However, most people avoid doing this because it is semantically constricting. I would go with the first method.
Set a class on the checkbox list as follows:
<asp:CheckBoxList ID="chkProject" runat="server" RepeatLayout="Table" RepeatColumns="3" CssClass="FilterCheck"></asp:CheckBoxList>
Then add the following CSS:
.FilterCheck td {
white-space:nowrap !important;
}
This ensures the label stays on the same line as the checkbox.
I had the same problem with bootstrap 3 horizontal-form, and finally found a try-error solution and works with plain html-css too.
Check my Js Fiddle Demo
.remember {
display: inline-block;
}
.remember input {
position: relative;
top: 2px;
}
<div>
<label class="remember" for="remember_check">
<input type="checkbox" id="remember_check" /> Remember me
</label>
</div>
Tried the flex attribute?
Here's your example with flex added:
HTML
<div id="right_sidebar">
<form id="send_friend" name="send_friend" action="#" method="post" style="display: block; ">
<fieldset>
<label for="from">From</label>
<input type="text" name="from" id="from" value="">
<label for="to">To</label>
<input type="text" name="to" id="to">
<label for="msg">Comment <span class="sp"></span>
</label>
<textarea name="msg" id="msg" rows="7"></textarea>
<div class="row">
<div class="cell" float="left">
<input type="checkbox" name="agree">
</div>
<div class="cell" float="right" text-align="left">
<label for="agree">Accept the terms</label>
</div>
</div>
<button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>
CSS
body {
color: #333;
font: 12px Arial, Helvetica Neue, Helvetica, sans-serif;
}
[class="row"] {
display: flex;
flex-flow: row wrap;
margin: 2 auto;
}
[class="cell"] {
padding: 0 2px;
}
#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}
form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}
form label {
color: #435E66;
display:block;
font-size: 12px;
}
form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}
form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}
form button.blue_button {
margin-top: 10px;
vertical-align: top;
}
button.blue_button {
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}
Flex allows for table style control with the use of divs for example.
The simplest way I found to have the checkbox and the label aligned is :
.aligned {
vertical-align: middle;
}
<div>
<label for="check">
<input class="aligned" type="checkbox" id="check" /> align me
</label>
</div>
<div>
<input class="aligned" type="checkbox" />
<label>align me too</label>
</div>
<div>
<input type="checkbox" />
<label>dont align me</label>
</div>
I know this post is old, but I'd like to help those who will see this in the future. The answer is pretty simple.
<input type="checkbox" name="accept_terms_and_conditions" value="true" />
<label id="margin-bottom:8px;vertical-align:middle;">I Agree</label>