If I have an HTML input field like this one:
<input type="text" id="mytextfield"/>
all browsers seem to show the caret (insertion point) in the field. Is is possible to prevent this from appearing by applying some CSS or javascript?
(My reason for asking is that my input is the basis of a GWT-Ext combo box like the ones on http://www.gwt-ext.com/demo/#linkedComboBox - you can't type in it, but you can still see the caret, which is annoying).
What you could try is disable the input element and explicitly set its color to black:
<input type="text" disabled="disabled" style="color: black;" ... />
This should work for the GWT-Ext combo box (at least it did when setting the attributes in firebug).
Related
<form action="https://google.com" method="get">
<label for="id">Enter:</label>
<input id= "id1" type="text" name="" placeholder="Notlabebeld">
<input id= "id" type="text" name="" value="Labeled">
</form>
how this label tag works, i want to label 2nd input tag, but that's not what i get after this.
I know by writing label after first input tag, that will give desired result. Just want to know how it works :#
Adding a label to the input field has no effect on its positioning., it is mostly programmatic association. For text fields, it means that clicking on the label will focus the text field, for check-boxes, it will toggle the checkbox etc. Also, it is used by screen readers. You can place the input field at the bottom of the page and its label to the top of the page and still connect them using id and for.
There is great a documentation with examples on Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
I have a checkbox, and then I have a <label> with a for attribute which is used to activate this checkbox. There is an <img> within this label. Usually, clicking the image changes the checkbox, but when text is selected elsewhere in the page it doesn't always work on the first click. Example:
Select this text! Then try to activate the checkbox by clicking the image while text is still selected:
<input id='check' type='checkbox'>
<label for='check'>
<img style='height: 75px' src='https://codepo8.github.io/canvas-images-and-pixels/img/horse.png'>
</label>
It works as expected in Firefox (only takes one click, and is reliable), so I'm inclined to believe this is a browser issue, but am not 100% sure. Is there anything else that could be causing this, and any possible way to work around it?
Is there a css or html only way to prevent a user from typing in an input field?
I want to dynamically add stuff and remove stuff etc to an input field but I don't want the user to be able to edit it and using the disable attribute on the html tag prevents me from doing what I want.
You can use readonly or disabled attribute.
The drawback to using disabled is that the value of the disabled element won't be submitted when the form is.
You'll likely want readonly. Which can easily be styled to look like a disabled element.
document.getElementById('test').value = 'Hello World!';
[readonly] {
border: 1px solid #ccc;
background-color: #eee;
}
<input type="text" id="test" name="test" readonly>
You can use the attribute readonly - read about it here
Yep, you can just set the input element's disabled property to true. That will prevent the user from modifying its contents, but you can do what you like with it by using Javascript to modify its value property.
add readonly to it
<input type="text" value="Hello" readonly />
Uhm.....
<input type="text" name="myInput" value="Whatever" readonly="readonly" />
More here: What is the correct readonly attribute syntax for input text elements?
You can fake the disabled effect using CSS.
pointer-events:none;
You might also want to change colors etc.
CSS is not meant to change the behavior of form elements. It's meant to change their style only. Hiding a text field doesn't mean the text field is no longer there or that the browser won't send its data when you submit the form. All it does is hide it from the user's eyes.
To actually disable your fields, you must use the disabled attribute in HTML or the disabled DOM property in JavaScript.
OR JQUERY
$('#fieldname').attr('disabled', 'disabled'); //Disable
$('#fieldname').removeAttr('disabled'); //Enable
This question might appear as duplicate of:
XPATH required for an input text field? but question is why my custom xpath is not working. Though it is working for buttons, plain text on page, links etc.
Here is the HTML of it:
<input id="uemail" class="input_text" type="email" value="" tabindex="1" size="30" name="user[email]" autofocus="autofocus" autocorrect="off" autocapitalize="off"/>
For this HTML I tried to find it in firebug, I wrote:
//*[text()[contains(.,'user_email')]]
//id[text()[contains(.,'user_email')]]
//*[id()[contains(.,'user_email')]]
but none of worked, what am I missing.
Reasons:
1. Because, You are looking for text using text() but there is no text(as per given HTML), like you might have in links, buttons, plain text on page etc,so remove it.
2. after 'contains' you are looking for all elements just look for its type i.e. id
3. third you know that it's an input field so use * or input. * means any and input means that this is an input box.
So, finally it becomes://input[contains(#id,'user_email')]. Which I am sure will work.
I am styling a form with an input field. The input field is required to be completely transparent. The input field itself is no problem but once I start typing, the browser opens up the dropdown with the saved form data, displaying the words I previously entered in input fields. The dropdown itself is not transparent but is white. When I hover over one of the saved words it appears in the input field and when it does, the input field is also given the white background.
I tried setting the background for the active, focus and hover state to transparent but that doesn't seem to do the trick. I am also not able to see the saved form data dropdown in the element inspector so I don't know how to target it.
HTML:
<form class="" action="" method="_GET" accept-charset="utf-8" role="]">
<div class="form-group">
<label class="sr-only" for="q">Search Input Field</label>
<input class="form-control" type="text" name="q" value="" placeholder="SEARCH">
</div>
<button type="submit" class="btn btn-default btn-red">SEARCH</button>
</form>
Here's a fiddle:
http://jsfiddle.net/dtxeofnL/
Click into the input field and type a letter. If you have previously entered something in the input field (or another input field in your browser), the dropdown will appear. When you hover over one of the words in the dropdown, it'll appear in the input field and give it an opaque, white background.
Can this be done?
Autocomplete is browser and operating system specific. There doesn't appear to be any way to style the browser's own internal autocomplete function.
I would suggest disabling browser autocomplete altogether:
<input autocomplete="off">
Then utilizing JqueryUI's Autocomplete function, http://jqueryui.com/autocomplete/, which can be styled any which way you'd like.