I have an input of type button that is used to validate a form an input of type text.
I have seen that, for example, bootstrap lets you append some values to input. I am wondering how would I do append this input of type button into my input of type text.
I have added a screenshot of how I am thinking of it to be, but I am not sure which CSS strategy I would choose.
Thanks
It is nothing but a submit button with a text field
Demo
HTML
<div class="wrap">
<input type="text" />
<input type="button" value="Demo" />
</div>
CSS
.wrap {
display: inline-block;
position: relative;
}
input[type=text] {
padding: 10px;
width: 300px;
padding-right: 60px;
}
input[type=button] {
padding: 2px;
position: absolute;
right: 5px;
top: 5px;
}
Related
What would be correct approach to aligning placeholder to the top of the field, while input text appearing normally in the middle?
Any way to do that with CSS on input/::placeholder only, or should i rather construct a wrapper with span that would disappear when active and input field below it?
Here's a fiddle of what i've got now: https://jsfiddle.net/ejsLfvdn/1/
And that's what it should look like up to customers will:
The input masks are not the case here, i'm only struggling with the placeholder being aligned to the top, while input should appear normally in the middle. The placeholder MUST disappear after filling input.
I don't think that you will be able to do this by directly targeting the placeholder pseudo class (::placeholder).
Only a small subset of CSS properties can be applied to this element and position is not one of them:
https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
I think you will need to take the approach of a wrapper with span and input and position appropriately.
You could use something like this with the only issue being the input must have the required attribute.
* {
box-sizing: border-box;
}
.input {
display: flex;
flex-flow: column-reverse nowrap;
border: 1px solid gray;
width: 220px;
}
.input input:valid + label {
opacity: 0;
}
.input input {
width: 100%;
padding: 10px;
border: none;
}
<div class="input">
<input required id="username" name="username" type="text" />
<label for="username">Username</label>
</div>
I hope I achieved what you need.
btw, I used jquery to hide the placeholder while typing and display it again if the field is empty.
$('.form-control').keyup(function(){
var val = $(this).val();
if(val == ""){
$('.placeholder').show();
}else{
$('.placeholder').hide();
}
});
.input-cont{
position: relative;
}
.form-control{
border: 1px solid #DDD;
border-radius: 5px;
height: 40px;
padding-left: 8px;
}
.placeholder{
position: absolute;
top: 5px;
left: 8px;
color: #3dc185;
font-size: 12px;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<form>
<div class="input-cont">
<span class="placeholder">Imię</span>
<input class="form-control" type="text" name="name">
</div>
</form>
</body>
</html>
You can use translateY(-100%) on your placeholder to move the text upwards and then give your textbox some padding at the top to reveal the text:
.placeholder-offset {
font-size: 20px;
padding-top: 25px;
}
.placeholder-offset::placeholder {
color: red;
transform: translateY(-100%);
}
<input type="text" placeholder="Username" class="placeholder-offset" />
I have an input field, and inside it on the right side there is a string that displays information to the user.
<div class="my_div_class">
<input class="my_input_class" type="text" placeholder="Search">
<span class="my_span_class">6000 available</span>
</div>
Using position relative and absolute, I places the span inside the input field.
However, if the user types a long query, the text will be under the span text.
Is there a way to force the input field to do the horizontal scroll when the user reaches a point before the right margin, ideally without using javascript?
You can add some padding-right to the input box.
.my_div_class {
position: relative;
width: 200px;
}
.my_input_class {
width: 100%;
padding-right: 100px;
box-sizing: border-box;
}
.my_span_class {
position: absolute;
right: 0;
top: 0;
}
<div class="my_div_class">
<input class="my_input_class" type="text" placeholder="Search">
<span class="my_span_class">6000 available</span>
</div>
.my_input_class {
padding-right: 1em; // Replace `1em` with the desired amount of padding
}
I am using Custom Radio Button. Also added required attribute to it.
Required is working but ERROR not shown....
Form not get submitted without selecting radio....
But
"Please Select One of These Options"
error is not shown.
code is :
<form>
<div class="form-field-label">Change In Weight :</div>
<div class="form-field-input">
<input type="radio" name="change_in_weight" id="change_in_weight1" required value="Maintained" class='radiobutton'><label for="change_in_weight1" class='radiobutton-label'>Maintained</label><br>
<input type="radio" name="change_in_weight" id="change_in_weight2" value="Increasing abnormally since last one year" class='radiobutton'><label for="change_in_weight2" class='radiobutton-label'>Increasing abnormally since last one year</label><br>
<input type="radio" name="change_in_weight" id="change_in_weight3" value="Decreasing abnormally since last one year" class='radiobutton'><label for="change_in_weight3" class='radiobutton-label'>Decreasing abnormally since last one year</label><br>
</div>
<br>
<input type="submit" value="send">
</form>
CSS :
.radiobutton-label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 15px;
}
input[type="radio"] {
display:none;
margin: 10px;
}
.radiobutton-label:before {
content:"";
display: inline-block;
width: 24px;
height: 24px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
}
input[type=radio] + label:before {
background: url('http://drdilipgadgil.com/img/vlad.png') 2px 4px no-repeat;
}
input[type=radio]:checked + label:before {
background: url('http://drdilipgadgil.com/img/vlad.png') 2px -18px no-repeat;
}
:required:focus {
box-shadow: 0 0 6px rgba(255,0,0,1);
}
Here is JSFIDDLE
I know I'm late But since I had the same problem and I've looked it up and stumbeled on this thread, I would like to say that THERE IS A WAY.
1- don't hide your actual radio button (DON'T set display :hidden;
2- set it's opactity to 0 and position to absolute
----it worked fine for me
opacity: 0;
position: absolute;
Here is JSFIDDLE
In the case of custom radio buttons, you have to handle error cases separately. Error is not showing because radio buttons are hidden. If you give 'display:block' for radio buttons, you can see the error after submitting. So you can go for two solutions.
Keep default radio buttons
OR
Handle error case via JS, and show custom message.
Just try to make some function in javascript when the button is clicked and the radio button is empty (nothing selected) just display the error in any div or whatever you want. (for example just use alert to simply test it)
Here's what I currently have:
<input type="text" name="amount" style="height:40px;width:200px;font-size:23px;text-align:center;" value="${$amount}" />
This is the part I'm specifically talking about:
value="${$amount}"
By default that shows $10.00 which is what I want. However, I don't want users to be able to edit the $ symbol. It should always remain there AND I don't want the dollar symbol submitted with the form. It's simply there for appearance so that users know the currency.
You can put the dollar sign as a background image for the input and leave some padding-left so that the text doesn't go over the background image.
You could use a pseudo element.
DEMO
<label>Label</label>
<span><input type="text" placeholder="Placeholder"></span>
input {
padding: 10px;
padding-left: 15px;
margin-left: 10px;
}
span:before {
content: "$";
position: relative;
left:10px;
margin-right: -15px;
}
Requires a wrapper element around your input as you cant generate a pseudo element on an input
Your best option is to put the sign outside the input element.
Try this: http://jsfiddle.net/mgmBE/45/
HTML:
<div class="input-container">
<input type="text" value="amount" name="" />
<span class="unit">$</span>
</div>
CSS:
.input-container {
position: relative;
width: 100px;
}
.input-container input {
width: 100%;
}
.input-container .unit {
position: absolute;
top: 3px;
right: -3px;
background-color: grey;
color: #ffffff;
padding-left: 5px;
width:20px;
}
Pseudo Element is the best option as very easy to place.
<label>Input:</label><span><input type="text" placeholder="Placeholder"></span>
CSS
input {
padding: 10px;
margin-left:15px;
}
span:before {
content: "$";
margin-right:-15px;
position: relative;
left:10px;
}
Probably thi is a simple question. But I'm new with css and javascript.
I have a button below the textarea and I want the button to move along with the textarea when I extend it!
How can I do this?
To align button to textarea corner and keep it in same relative position while expand contract, try the following :
First of all, the HTML code :
<form>
<textarea></textarea>
<p>
<input type="reset"/>
<input type="submit" value="Submit"/>
</p>
</form>
Then, add css property :
form {
position: relative;
display: inline-block;
}
form textarea {
min-width: 140px;
}
form p {
margin: 0;
padding: 0;
display: block;
text-align: right;
}
Finally, here is the JsFiddle.
Enjoy your day!