I want to have border to my label text and its associated textbox. I have used border-bottom property but because my label is padded to left its border is not right below it.
html
<div>
<span class="elements">
<label class="field" for="Title">Title</label>
<input name="Title" readonly="readonly" type="text" value="Mr">
</span>
</div>
css
.elements {
padding: 10px;
border-bottom: solid;
border-bottom-color: #1f6a9a;
}
.field {
font-size: 15px;
color: #b6d6ed;
padding-left: 44px;
}
label {
display: inline-block;
width: 80px;
}
input {
background-color: transparent;
border: 0 solid;
height: 25px;
width: 300px;
color: #b6d6ed;
}
jsfiddle : http://jsfiddle.net/2HARy/
I want to have border start from "Title" text only
Remove padding-left: 44px from the .field element and use a margin on the parent element instead. In doing so, the border will start at "title".
Updated Example
.elements {
padding: 10px;
margin-left: 44px;
border-bottom: solid;
border-bottom-color: #1f6a9a;
}
.field {
font-size: 15px;
color: #b6d6ed;
}
Additionally, if you want the border to start directly at the text, remove the padding-left on the .elements element. (example).
Since you have padding-left:44px there is no way to have the border start from the "Title" text. What you must do is remove that property from .elements, wrap .elements in a div, and apply the padding-left property to that div.
Here is a jsfiddle http://jsfiddle.net/3TChG/
Related
I've stumbled upon an interesting challenge in css which I can't seem to figure out.
I'm trying to make a form field, quite similar to what google does in their login form, where the label is moved relatively to to the top when the form field has focus, covering part of the form field's border. This is rather easy when the background is white, as I can just set background-color: #fff on the label.
In my case, however, I have a full-screen image background, which means my label background has to be transparent for the background-image, but has to cover the border of the form field. Is this possible?
This is my form markup:
<form>
<div class="form-field__container">
<div class="form-field__wrapper">
<label class="form-field__label input--active">Email</label>
<input class="form-field__input form-field__input--text"
type="text">
</div>
</div>
</form>
The form-field has a border around it:
.form-field__input {
border: 2px solid #e6e6e6;
}
The input--active class is set when the form field has focus, which adds the following styles to the label:
top: -10px;
left: 10px;
z-index: 1;
This moves my label over the top-border of the form field. Normally, I would then just add a background-color to the label which is the same as the page background, set a display: blockon that, and the label would cover the part of the form field border, which would solve my issue.
I do however have an image as a page background, which means I can't set a background-color on the label, because this would also cover a part of the page background. Is there any css property which allows me to have the label behave in a way that cuts out the part of the top border of the form-field which is below the label but doesn't cut away any of the background-image?
Below is an image of what I've got so far, for clarification:
I'd really appreciate the help.
Greetz derelektrischemoench
That's what you have fieldset and Legend for:
<fieldset>
<legend>
<label class="form-field__label input--active">Email</label>
</legend>
<input class="form-field__input form-field__input--text" type="text">
</fieldset>
here's an alternative hack that hides the top border completely and uses additional elements to create border to the left and right of the label text...
it's different than your approach and element structure, but it may give you some hints in how to use other elements to emulate a top border
body {
font-family: sans-serif;
background: linear-gradient(to top right, pink, orange);
}
input {
border: 2px solid black;
border-top: 0;
background: transparent;
}
input:focus {
outline: none;
border-color: blue;
}
label {
display: flex;
flex-direction: column;
}
label:focus-within .top-border-replacement:before,
label:focus-within .top-border-replacement:after {
border-color: blue;
}
label:focus-within .label-text {
color: blue;
}
.top-border-replacement {
display: flex;
}
.label-text {
position: relative;
bottom: -7px;
display: inline-block;
font-size: 12px;
padding: 0 4px;
font-weight: bold;
}
.top-border-replacement:before {
content: '';
width: 10px;
border-bottom: 2px solid black;
}
.top-border-replacement:after {
content: '';
width: 100%;
border-bottom: 2px solid black;
}
<label>
<span class="top-border-replacement">
<span class="label-text">TEST</span>
</span>
<input type="text" />
</label>
Hello I want to set the light gray outline outside gray border line just like in the following image.either there is a border position set or blur effect the input text.
Please tell me how can I fix this issue? I am doing all of this in css.
.container {
background-color: aquamarine;
width: 100%;
height: auto;
}
input[type="text"],
textarea,
textarea.form-control {
background-color: #efeeef;
width: 396px;
height: 48px;
border-radius: 4px;
border: 3px solid #cecece;
}
textarea.form-control {
line-height: 50%;
font-size: 16px;
color: red;
font-weight: 500;
}
<div class="container">
<!--Form element-->
<form>
<fieldset>
<input type="text" name="form-email" placeholder="Enter Your email" class="form-email form-control textarea border-color outline" id="form-email">
</fieldset>
</form>
</div>
When I am using shade effects it is also useless.Is there any way to set the position of the border in this input area.
Borders cannot be set to blur (at least directly). If you are using some sort of CSS library, say Bootstrap then it may be adding box-shadow to the input elements.
Setting the box-shadow: none; on the required input should solve the problem.
I am not a expert but try
form{
border: 1px(thickness) outset(type of border) grey(color)
}
for more information go to this link:
https://www.w3schools.com/css/css_border.asp
I have managed to put the placeholder plus the dd/mm/yyyy together. When I click in order to key in or select the date, the box resets to its default state. Styles like padding, width, and color disappears but when I click outside the box, it returns to default with the styles in place. I would like it to remain the same when selecting the date. Kindly help.
input {
border: 1px solid #ecf0f1;
color: #00A79D;
}
input[type=date] {
text-align: right;
}
input[type="date"]:before {
color: lightgrey;
content: attr(placeholder) !important;
margin-right: 0.3em;
padding: 11px;
}
input[type="date"]:before {
color: lightgrey;
content: attr(placeholder) !important;
margin-right: 0.5em;
}
input[type="date"]:focus:before {
content: '' !important;
color: #00a79d;
}
<div class="col-sm gutters-19">
<div class="form-group">
<div class="form-select-custom">
<input type="date" placeholder="Departure" onchange="this.className=(this.value!=''?'has-value':'')">
</div>
</div>
</div>
This style content: '' !important; is causing the problem:
input[type="date"]:focus:before {
content: '' !important; /* THIS IS THE PROBLEM */
color: #00a79d; /* This is ok */
}
You are removing all the content (i.e. the placeholder word "Departure") and that is what is adding the width and padding.
FYI you are also duplicating the input[type="date"]:before rule, I've combined them into one.
Snippet with that line removed, and you can see it is working:
input {
border: 1px solid #ecf0f1;
color: #00A79D;
}
input[type=date] {
text-align: right;
}
input[type="date"]:before {
color: lightgrey;
content: attr(placeholder) !important;
margin-right: 0.5em;
padding: 11px;
}
input[type="date"]:focus:before {
color: #00a79d;
}
<div class="col-sm gutters-19">
<div class="form-group">
<div class="form-select-custom">
<input type="date" placeholder="Departure" onchange="this.className=(this.value!=''?'has-value':'')">
</div>
</div>
</div>
You shouldn't use ::before on input date elements, since it's heavily browser-specific
Your styles don't disappear : you make your ::before vanish, and it's the thing making the space inside your input. So your input naturally shrinks. Just play with your input[type="date"]:focus::before content, you'll see what i mean.
Not tested, but you could perhaps avoid your javascript toggleClass by using the :empty state. https://developer.mozilla.org/fr/docs/Web/CSS/:empty
simply set width and height to input tag
input{
height: 39px;
width: 237px;
}
I've been trying to eliminate the space between these two labels, which I'd like to be side-by-side, to no avail. I've checked the way jQuery UI does it, but as far as I can tell their CSS is the same as mine. What am I missing?
.buttonset label {
width: 45%;
display: inline-block;
border: 2px solid #eee;
text-align: center;
padding: 5px 0px;
margin: 0px;
}
.buttonset label.checked {
border: 2px solid #5dccdb;
color: #5dccdb;
font-style: italic;
}
.buttonset input[type='radio'] {
display: none !important;
}
Fiddle
Any help appreciated.
Remove the white space between the labels in your HTML:
Demo http://jsfiddle.net/w76rM/4/
There are several ways to do it, three of the quickest ones are to comment out the white space, have all the elements in one line or have the ending > of the previous tag at the beginning of the next line.
1 -In one line:
<Label>...</label><Label>...</label>
2- Commented out:
<Label></label><!--
--><Label></label>
3- > of previous tag at the beginning of the next line:
<Label></label
><Label></label>
Your markup with commented out white space:
<div class="buttonset one_half">
<div>Twins</div>
<label for="twins_yes">
<input id="twins_yes" name="twins" type="radio" value="Yes">Yes</label><!--
--><label for="twins_no" class="checked">
<input id="twins_no" name="twins" type="radio" value="No" checked>No</label>
</div>
You have to add float left to the label elements
.buttonset label {
width: 45%;
display: inline-block;
border: 2px solid #eee;
text-align: center;
padding: 5px 0px;
margin: 0px;
float: left; }
I have an input box
<span class="arrowDate"><input type="text" value="<?php echo $inputValue; ?>" id="<?php echo $id; ?>" class="datePickBox" /></span>
What I want to achieve is to add via css and image with and arrow in the right hand corner of the input box. If I change properties to the image, the properties of the input box should remain the same. Basically the image should be a type of overlay for the input box, but do not know how to do this.
.datePickBox{
font-size: 0.9em;
border: 1px solid #DEDEDE;
width: 270px;
position:relative;
right:0px !important;
padding-right:20px;
}
.arrowDate{ background:url('../images/arrow.png') no-repeat right center; border:1px solid #DEDEDE; }
Give your <input> a transparent background so the background of the <span> can shine thru and remove the border, because the border comes from the <span> in your case;
.datePickBox {
background: none;
border: none;
}
But your text will be over the background image, if long enough, so you can additionaly add a right padding as large as the image is wide.
.datePickBox {
background: none;
border: none;
padding-right: 20px; /* bg image width */
}
Given the mark-up:
<span><input type="text" id="textInput" name="textInput" />→</span>
I used the CSS:
span {
display: block;
width: 150px;
height: 30px;
position: relative;
background-color: #ffa;
text-align: right;
overflow: hidden;
border-radius: 1em;
border: 1px solid #ccc;
line-height: 30px;
padding: 0 0.5em 0 0;
}
span > input {
position: absolute;
top: 0;
left: 0;
right: 2em;
bottom: 0;
background-color: transparent;
border-radius: 1em 0 0 1em;
border-width: 0;
border-right: none;
outline: none;
}
To give the following JS Fiddle demo.
It's worth noting that I explicitly chose to place the arrow alongside the input, instead of 'overlaying' it above the input. It's also possible to amend my answer from the a similar question to create a comparable layout with a submit button alongside the input.
Can't get the image to display within the input box, with overlay I mean floating above the input box
you won't be able to get it floating above the text with background-image.
One way to do this would be to place the image next to the input field, and using relative positioning to move it above it.
CSS:
.boximage { position: relative; left: -40px; z-index: 2 }
HTML:
<input type='text'><img class='boximage' src='image.gif'>
better use this
<span><input type='text' /><img src='datepicker.jpg' /></span>
change the css to meet your overlay.. remove the right border of the text box