I have a input box which using the x button to clear the filed. But with adding this addition attribute to the input box the border of the input has two styles now.
In the below image the input box right border is round where as left border is straight. How I can make the border style round for both side?
code:
<div class="input-group">
<div class="btn-group has-feedback has-clear">
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
<span id="searchclear3"
class="glyphicon glyphicon-remove-circle form-control-feedback form-control-clear input-group-text"
style="pointer-events:auto; text-decoration:none; cursor:pointer;"
onclick="$(this).prev('input').val('');return false;">
</span>
</div>
There are several ways:
You can use the simplest css
input {
border-radius: 50px; /*If it doesn't work add !important*/
}
Or a js code
const input = document.querySelector('input');
input.style.borderRadius = '50px';
Or you can use a bootstrap class that is already preset (I see you are using bootstrap 4)
form-control-rounded
In this way:
<input type="text" class="form-control form-control-rounded" id="basic-url" aria-describedby="basic-addon3">
Use the CSS property border-radius to style it.
It has four values for each side, however, if only one value is passed, it will set it to the entire border.
Therefore, the CSS should look similar to this:
#form-control {
border-radius: 10px;
}
Related
This question already has answers here:
HTML text input field with currency symbol
(17 answers)
Closed 2 years ago.
I have a textbox that displays the amount in Rupee.
I want the ₹ symbol in front of the amount (₹250), the ₹ symbol should not be editable but the amount(text) in the text box should be editable.
<input type="text" value="₹">
How can this be implemented?
Another solution would be to use a <label> tag in front of the input:
label {
position:relative;
left:+15px;
}
input {
text-align:right;
}
<label for="abc">₹</label><input type="text" id="abc"/>
If you don't want to add any js logic, then you should add a wrapper and hardcode the currency there.
Ideally, this is a perfect scenario for using css pseudoclasses, as :before.
The idea is to add that fixed character from css:
input:before {
content: '₹';
}
Unfortunately, pseudoclasses don't work on self-closing HTML elements, like <input /> (here's a more in-depth explanation of why this happens: https://stackoverflow.com/a/27708091/491075), so you'd have to add a wrapper to your input that would eventually hold the currency symbol.
Here's a simple example of how you could do that:
.input-wrapper {
position: relative;
}
.input-wrapper:before {
content: attr(data-currency);
position: absolute;
left: 0.25em;
top: 0;
}
.input-wrapper > input {
text-indent: 1em;
}
<div class="input-wrapper" data-currency="₹">
<input type="number" />
</div>
<div class="input-wrapper" data-currency="$">
<input type="number" />
</div>
<div class="input-wrapper" data-currency="€">
<input type="number" />
</div>
If you can't or don't want to alter the DOM, then you could use javascript to listen to any change on the input and have the currency prepended to the value.
Here's a very simple example of how you could achieve this in plain js:
const currencySymbol = '$'
const input = document.getElementById('currency-input')
input.addEventListener('keyup', function(e) {
input.value = input.value[0] === currencySymbol
? input.value
: `${currencySymbol}${input.value}`
})
<input id="currency-input" value="$0" />
You can use css ::before
Give your input a class of currency
<input type="text" value="₹" class="currency">
Then add this to your css
.currency::before{
content: "₹";
.. any other properties like width, height, position, size, color etc..
}
The symbol will appear outside, in front of the input not inside the input. You can use position and padding to place it inside though.
I am using React Semantic UI. In css I am trying to change the Background color of a Parent label of an input, so when the radio button is clicked it changes colors. I am hiding the radio button with display none. Since the label gives it a nice button look. Here is my code. In html I just used a input tag and changed the span but it has to be done differently with the react semantic ui library. I was able to get it to work with input and span like in my html version but in this case the click functionality wouldn't work.
Here is a CodeSandbox with the React Semantic Ui Library loaded in its implements the first answer but does not work. https://codesandbox.io/s/kind-tereshkova-u9toz?fontsize=14
I Added the "Compiled" html
<Segment>
<Menu attached="top" borderless={true}>
<Menu.Item>
<Header>
Scale:
</Header>
<Label className="filter_check" size="large">
<Form.Field
label="Year"
control='input'
type='radio'
name='year'
/>
</Label>
</Menu.Item>
</Menu>
</Segment>
.filter_check input {
display: none;
}
input:checked + .filter_check>.label {
background: #00b5ad !important;
width: 100% !important;
}
.field input[type=radio]:checked + label {
background: red;
color: #fff;
margin-left: 1em;
padding: .3em .78571429em;
}
"complied" html
<div class="ui segment">
<div class="ui borderless top attached menu">
<div class="item">
<div class="ui header">Scale:</div>
<div class="ui large label filter_check">
<div class="field"><label><input name="year" type="radio"> Year</label></div>
</div>
</div>
</div>
</div>
After viewing the SandBox, I was able to see that the React code compiles to the following HTML:
<div class="ui large label filter_check">
<div class="field">
<label>
<input name="year" type="radio"> Year
</label>
</div>
</div>
Then I figured you want to modify the parent element upon clicking the input field. This is not trivial and required modifying the parent element, which I did using the onChange prop of the <Form.Field>:
<Label className="filter_check" size="large">
<Form.Field
label="Year"
control="input"
type="radio"
name="year"
onChange={checkInput}
/>
</Label>
With the following function, that adds the checked class to the modified element:
function checkInput(e) {
let labelElement = e.target.parentNode;
let bgElement = labelElement.parentNode.parentNode;
bgElement.classList.add('checked');
}
Then we update the CSS with the following:
div.ui.large.label.filter_check.checked {
background-color: red;
}
And - Voilà!
Thanks for viewing my question. I have a form below that has a file input field. Safe to say I have hidden this input field, and am now using the label as the primary "button" to select the files. Once a user clicks on the "Upload Picture..." label, I want the text inside the label to change from "Upload Picture..." to the file name. I'm following this tutorial below however the javascript written (in the tutorial) is for multiple files being able to be selected by the user. I only am allowing my users to select ONE file. This is a change your profile picture page to give a little insight as to what this form does.
Here is the code:
<!-- Change Picture Form -->
<div class="changepic-wrap">
<form action="changepicauth.php" method="post">
<input type="file" name="profilepic" id="profilepic" class="inputfile">
<br>
<label for="profilepic">
<img src="/images/profile/upload.png" />
Upload Picture...
</label>
<br>
<div class="button-wrap">
<button>Change Picture</button>
</div>
</form>
</div>
Here is the tutorial:
http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
Can someone help explain to me what i have to do? I'm thinking something along the lines of an eventlistener but i'm not sure about javascript. I'm a backend dev and know very little about javascript. I do NOT WISH TO USE JQUERY. Straight javascript only.
Thanks again for your help StackOverflow members! :D
Edit:
Some people have said that the text is changing already. It's not... I want the LABEL text to change. The "File Input" tag has two parts to it. The button, and the text next to the button. I've hidden the input tag using the following SASS code. This way only the "Upload Picture..." label text is displayed. Please make sure to add this SASS code to your file so you can see that the LABEL text does not change.
.inputfile
width: 0.1px
height: 0.1px
opacity: 0
overflow: hidden
position: absolute
z-index: -1
You can use the javascript onchange event to detect when the value of the #profilepic input changes.
When it does, you can capture the new value of the #profilepic input and replace the text of the label with that value.
Example:
var profilePic = document.getElementById('profilepic'); /* finds the input */
function changeLabelText() {
var profilePicValue = profilePic.value; /* gets the filepath and filename from the input */
var fileNameStart = profilePicValue.lastIndexOf('\\'); /* finds the end of the filepath */
profilePicValue = profilePicValue.substr(fileNameStart + 1); /* isolates the filename */
var profilePicLabelText = document.querySelector('label[for="profilepic"]').childNodes[2]; /* finds the label text */
if (profilePicValue !== '') {
profilePicLabelText.textContent = profilePicValue; /* changes the label text */
}
}
profilePic.addEventListener('change',changeLabelText,false); /* runs the function whenever the filename in the input is changed */
<div class="changepic-wrap">
<form action="changepicauth.php" method="post">
<input type="file" name="profilepic" id="profilepic" class="inputfile">
<br>
<label for="profilepic">
<img src="/images/profile/upload.png" />
Upload Picture...
</label>
<br>
<div class="button-wrap">
<button>Change Picture</button>
</div>
</form>
</div>
You can use change event, select element having for attribute value equal to event.target: #profilepic element id, set the .innerHTML of selected element to event.target.files[0] .name
document.getElementById("profilepic")
.addEventListener("change", function(e) {
document.querySelector("[for=" + e.target.id + "]")
.innerHTML = e.target.files[0].name;
})
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
<!-- Change Picture Form -->
<div class="changepic-wrap">
<form action="changepicauth.php" method="post">
<input type="file" name="profilepic" id="profilepic" class="inputfile">
<br>
<label for="profilepic">
<img src="/images/profile/upload.png" />Upload Picture...
</label>
<br>
<div class="button-wrap">
<button>Change Picture</button>
</div>
</form>
</div>
In a modal:
For some reason When I dynamically add a li with two input fields using jquery append the spacing of the first li (which was already there) has a bigger gap in between the two inputs then the rest that are added dynamically.
After checking the developer tools in Chrome, I see that they all have the same padding, margins and borders. From a CSS point of view I can't see a reason why there would be a larger gap in the first one.
<div class="modal-body">
<ul id="add-groups-list">
<li class="add-group-item">
<input type="text" placeholder="Group Name" />
<input type="text" placeholder="Spots Available" />
</li>
</ul>
<p>+</p>
</div>
in a backbone view I do this:
addGroupInModal: function(e){
e.preventDefault();
this.$el.find("#add-groups-list").append('<li class="add-group-item"><input type="text" placeholder="Group Name" /><input type="text" placeholder="Spots Available" /></li>');
},
Here is some CSS:
#add-groups-list{
list-style: none;
}
.add-group-item input{
margin-left: 5px;
}
The reason is the white space, add a text node with 1 space in between the 2 inputs, or do not indent your HTML code.
this.$el.find("#add-groups-list").append('<li class="add-group-item"><input type="text" placeholder="Group Name" /> <input type="text" placeholder="Spots Available" /></li>');
As Antti says, the problem is that the whitespace between the input elements is being rendered. But if you want to keep the HTML a little more readable, you can also solve this with CSS by just floating the inputs:
#add-groups-list {
list-style: none;
}
.add-group-item input {
float: left;
margin-left: 5px;
}
And then add Bootstrap's clearfix class to the li elements for good measure.
Another way to solve it would be setting font-size on the parent elements (the lis) to 0. But I prefer floating the inputs.
http://jsfiddle.net/MY7zY/7/
I want a user to be able to customize their personal url page on my site, where the value of a text box will be "example.com/username" but I want the "example.com/" to be in the text box but not editable
Tumblr does this but I can't figure out how: http://www.tumblr.com/register
This is the code in question from the Tumblr page.
<input type="text" class="text_field" style="padding:0px; border-width:0px; text-align:right; width:325px; background:transparent;"
id="tumblelog_name" name="tumblelog[name]"
onfocus="$('tumblelog_name_background').style.backgroundColor = '#f9f8e4'; $('tumblelog_name_background').style.color = ''" onblur="$('tumblelog_name_background').style.backgroundColor = ''; if($('tumblelog_name').value == '')
{ $('tumblelog_name_background').style.color = '#c1cfdd' }"/>.tumblr.com
As you can see the additional .tumblr.com is not part of the input text box at all. It's a div that is styled to look like the text input box next to it. Therefore giving it the illusion of an unwritable input text field.
There is actually a JavaScript way of doing this without a messy CSS hack. See the script on this page: http://aspdotnet-suresh.blogspot.com/2010/11/introduction-here-i-will-explain-how-to.html
you can solve everything with css, is an input to the side of a div that contains the part that does not change with the same look.
html in your example:
<div style="position:absolute; right: 8px; top: 4px; white-space: nowrap;">
<input type="text"
class="text_field" style="padding:0px; border-width:0px; text-align:right; width:325px; background:transparent;"
id="tumblelog_name"
name="tumblelog[name]"
onfocus="$('tumblelog_name_background').style.backgroundColor = '#f9f8e4'; $('tumblelog_name_background').style.color = ''"
onblur="$('tumblelog_name_background').style.backgroundColor = ''; if($('tumblelog_name').value == '') { $('tumblelog_name_background').style.color = '#c1cfdd' }">.tumblr.com
</div>
You do it by checking the value of your textbox onkeyup. In your event handler you can make sure the textbox says whatever you want after the user hits a key. If they delete your text, you just put it back in there after. You would also want to make sure your handler gets called onblur as well.
there is no way to do this. if you view the source of tumblr.com you can see that the ".tumblr.com" is outside the input tag. its just simple styling. Right border of the input box = nothing. And add sibling node to continue the styling.
<input type="text" class="text_field" style="padding:0px; border-width:0px; text-align:right; width:325px; background:transparent;"
id="tumblelog_name" name="tumblelog[name]"
onfocus="$('tumblelog_name_background').style.backgroundColor = '#f9f8e4'; $('tumblelog_name_background').style.color = ''" onblur="$('tumblelog_name_background').style.backgroundColor = ''; if($('tumblelog_name').value == '')
`enter code here`{ $('tumblelog_name_background').style.color = '#c1cfdd' }"
/>.tumblr.com