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
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>
I'm new to this site and a beginner at html and css. I'm working on a personal project for practice and the design calls for both the input box and submit button to be a height of 55px and a width of 320 px. Both of these include a 2px border and a 15px padding. I'm not sure why my current code is not producing the same sizes. The input button is clearly smaller (both width and height) than the input boxes.
Any help would be appreciated.
body {
background-color: blue;
}
/* LOGO */
.logo img {
height: 35px;
padding: 50px;
display: block;
margin: 0 auto;
}
/* FORM */
.form {
background-color: white;
width: 400px;
height: 500px;
padding: 40px;
border-radius: 5px;
margin: 0 auto;
}
h1 {
font-family: "Courier New", Courier;
font-weight: normal;
text-align: center;
padding: 20px;
}
input[type='email'],
input[type='password'],
button[type='submit']{
height: 38px;
width: 303px;
border: 2px solid gray;
padding: 15px;
margin: 15px auto;
display: block;
font-size: 15px;
border-radius: 5px;
}
button {
background-color: green;
}
span {
color: white;
}
<div class="logo">
<img src="images/logo.png" alt="AnalogSea logo">
</div>
<div class="form">
<h1>Sign up</h1>
<form action="/signup" method="post" class="form_section">
<label class="email button_size" for="email" required>Email</label><br>
<input placeholder="foo#bar.com" type="email" name="email" id="email"><br>
<label class="email button_size" for="password" required>Password</label><br>
<input placeholder="1234passw0rd" type="password" name="password"><br>
<button type="submit"><span>Sign Up</span></button>
</form>
</div>
The reason it's happening is the way the box-model is rendered in browsers. In your example, the padding is what is causing the issue. For the button, the padding and border is included in the 303px, so the button is a total of 303px wide. For the <input> elements, the padding and border is added to the total width, giving it a width of 337px.
To fix this you can go about it a couple ways. You can reset the box-sizing (the property in CSS that handles this) globally like:
* { box-sizing: border-box }
Or you can add that to just the <input> elements.
input[type="whatever"] { box-sizing: border-box }
I personally do it globally as a reset, to make things consistent. That's a my preference.
If you do this, you'll have to readjust the height on your elements to 68px, because now the padding will be considered as part of the height property, not added to it.
Here's some reading on the box-model: http://www.w3schools.com/css/css_boxmodel.asp
Here's some reading on the box-sizing property: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Hope this helps!
I would change:
<button type="submit"><span>Sign Up</span></button>
to
<input type='submit' value='Sign Up' />
then alter your CSS. This solution is more backward compatible, as well.
EDIT: I've added the relevant code below at the bottom of this question. As you'll see there, the button is wrapped within a div. Also, this problem only occurs in one browser, that being Firefox, and I'll be using a hack to target that browser only.
I have an input element of type submit (i.e., basically a submit button). The text displayed in this element, as defined in the element's value attribute, appears too low (i.e., too close to the bottom of the button instead of vertically centered). The button has a fixed height.
Naturally, I want to move the button's text, as defined in the value attribute, one or two pixels upwards.
I've tried a few things with the button's padding (top and bottom), but that didn't change anything. [Is that to be expected, BTW?] Therefore, I would like to use relative positioning to move the text upwards a bit.
The thing is, however, that I need to target the text itself, NOT the input/button element. And that's of course because the button itself should stay at its current location, I only want to move the TEXT displayed on the button.
Thus my question: Is there a way, in CSS, to target not the button but only its displayed text (as defined in the value attribute) ?
Of course, other solutions (preferably CSS only) are welcome as well.
Code:
HTML:
<form id="zoekform">
<input type="text" class="" id="search-text" name="search-text" placeholder="Search">
<div class="erom" id="erom2">
<input id="zoekknop" style="float: right" type="submit" method="GET" value="Search!" />
</div>
</form>
CSS:
#zoekform {
height: 29px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 9px;
}
.erom {
height: 100%;
display: inline-block;
box-sizing: border-box;
}
#erom2 {
border: solid 1px #452F5D;
width: 27%;
display: inline-block;
box-sizing: border-box;
}
#zoekknop {
float: right;
height: 100%;
color: white;
font-size: 19px;
box-sizing: border-box;
background-color: #446666;
color: white;
letter-spacing: 2px;
border: solid 1px white;
width: 100%;
}
And finally the part where I'm targeting Firefox only, and where I can't get the padding working (and to be sure, the "media query" (it's not really a media query) does work, and in any case I've also tried this without the media query, i.e. as part of the regular CSS):
#-moz-document url-prefix() {
#zoekknop {
padding-top: -1px !important;
padding-bottom: 9px !important; // I set it to 9px for now, so that I could clearly see if it worked
}
}
For some reason form elements are particular and quirky about font.
Assign a font to the <submit>'s parent, then use font: inherit on the <submit> button.
On the <submit> assign line-height of 1.4 to 2 (notice there's no unit like px or em.) I actually have the line-height assigned by inheriting the font from <form> 1.4.
Set width using the ex unit of measurement. One ex is as wide as ax character, making it a great way of gauging how much space you are using in relation to your text. I used 9ex for a 6 character word (i.e. Submit).
This ruleset may help you for Firefox:
input::-moz-focus-inner {
border: 0;
padding: 0;
/* Some users have said these last two are
unnecessary or should be -2px */
margin-top:0;
margin-bottom: 0;
}
Here's some changes I did to your button and search field:
#zoekknop {....
....
border: 2px double white;
line-height: 1.65;
vertical-align: baseline;
}
#search-text {
line-height: 1.75;
vertical-align: baseline;
padding: 4px 3px 0;
}
Review the Snippet below:
#form {
font: 400 16px/1.4'Verdana';
}
#form .sub {
font: inherit;
width: 9ex;
color: blue;
border-radius: 5px;
}
#form .sub:hover {
color: cyan;
background: #888;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#zoekform {
height: 29px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 9px;
font: 400 16px/1.4 'Verdana';
}
#zoekform #zoekknop {
color: white;
font-size: 18px;
box-sizing: border-box;
background-color: #446666;
color: white;
border: 2px double white;
line-height: 1.65;
vertical-align: baseline;
}
#search-text {
line-height: 1.75;
vertical-align: baseline;
padding: 4px 3px 0
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
input::-moz-focus-inner {
border: 0;
padding: 0;
margin-top: 0;
margin-bottom: 0;
}
<form id="form" name="form">
<input type="submit" class="sub" value="Submit" />
</form>
<form id="zoekform">
<input type="text" class="" id="search-text" name="search-text" placeholder="Search">
<input id="zoekknop" type="submit" method="GET" value="Search!" />
</form>
This should work
#buttonID{
width: 500px;
height: 500px;
padding-bottom: 100px;//pushes text up inside the button
}
Make sure you define the height, width, line-height, font-size, and padding of the button. Then you should be able to manipulate the padding and line-height to get the result you want. It sounds like the button may be inheriting a line height that is causing the issue.
Targeting the text itself isn't the way to go about this. Would be helpful to see the CSS and HTML of the button, and note which browser the issue appears in.
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/
it's possible to make it like this when you onfocus (onclick) on the input text. Any help would be appreciated.
You can make use of outline and :focus, these are compatible with major browsers.
HTML
<input type="text" class="inp" />
<br>
<input type="text" class="inp" />
CSS
.inp{
border:solid 2px gray;
margin: 20px 5px;
outline:solid 10px silver;
}
.inp:focus{
outline:solid 10px red;
}
Preview on JSFiddle
You can do it like this :
input:focus
{
background-color:blue;//*
}
*this is just a example to change the background color.Do any thing that u desire here
Take look at complete example here.
You can wrap the input with an anchor tag, and set it to change background-color onfocus:
<a class='focused'><input /></a>
with CSS:
.focused:hover{
background-color:blue;
}
or, if you want it to change when the input is active, you need to use javascript/jQuery.
I think you would have to wrap each input in a div and give that div a background color when it has focus using JavaScript. Here's a version in jQuery...
$(document).ready(function() {
$('input').on('focus', function() {
$(this).parent().css('background-color', 'blue');
});
});
I think this CSS trick can be used rarely in real cases, but it is funny, that we can make this effect with box-shadows.
http://jsfiddle.net/XSpwg/
HTML:
<div>
<form>
<input></input>
<input></input>
<input></input>
</form>
</div>
CSS:
div {
background-color: lightgrey;
width: 80%;
max-width: 400px;
overflow: hidden;
padding: 5px;
}
input {
margin: 2em 0.5em;
display: block;
border: solid 2px lightblue;
outline: none;
height: 16px;
line-height: 16px;
font-size: 12px;
}
input:focus {
box-shadow: 180px 227px 0 200px lightgrey,
180px 195px 0 200px blue;
}
Use pseudo-class selector for various effects.
There are two possible methods using CSS
Method 1 --> if you need both hover and on focus effect then use border styling for the <input> element
here is a typical HTML and CSS for method 1, --> Jsfiddle view
HTML
<form class="form-style">
<input class="input-style" type="text" name="some-name">
<input class="input-style" type="text" name="some-name">
</form>
CSS
.form-style
{
width: 250px;
margin:auto;
background-color: #d6d6d6;
display:block;
}
.input-style
{
width:200px;
margin:auto;
padding-left: 0px;
padding-right: 0px;
line-height: 2;
border-width: 20px 25px;
border-collapse: separate;
border-style: solid;
border-color: #d6d6d6;
display: block;
}
input.input-style:focus, input.input-style:hover
{
border-color: #3399FF;
}
Method 2 -> if you need just a hover effect then enclose the <input> element in a <div> and add :hover effect to it, or you can use the method 1 :hover and remove the :focus selector
here is a typical HTML and CSS for method 2, --> Jsfiddle view
HTML
<form class="form-style">
<div class="input-style">
<input type="text" name="some-name">
</div>
<div class="input-style">
<input type="text" name="some-name">
</div>
</form>
CSS
.form-style
{
width:250px;
margin:auto;
display:block;
}
.input-style
{
width: 200px;
background-color: #d6d6d6;
padding:20px 25px 20px 25px;
display: block;
}
.input-style input
{
width:inherit;
line-height: 2;
display: block;
}
.input-style:hover
{
background-color: #3399FF;
}
My advice -> just use on focus effect, because on hover will highlight the <input> on which the mouse is over even if you you are typing (on focus) in another <input>