I have text box and what happens is that the user will click on a button and a string will be generated and displayed in the text box. I need to use a text box as that I can use the "name" attribute for posting, but I do not really need the box, so what I really want to know is how in css can I not display the box? I won't be able to use hidden because then user won't be able to see the text.
Thank you
You can remove the border and make the background color of the textbox transparent (or to whatever color your page is).
#textBox
{
border: none;
background-color: transparent;
}
<input name="example" style="border: none;">
and if you want to use simple span instead of input box:
<span id="example"> </span>
and JS code to change its contents:
document.getElementById('example').innerHTML = 'test';
Related
I am using kendoUI, I cannot change the html, they are generated by the framework.
I wish to remove/hide text in span and keep the image by clicking button. I cannot hide text only.
<span class="k-link">
<img></img>
menu text
</span>
Thank you
Try this,
CSS
.k-link{
font-size: 0px;
}
I have a text input for searching for products on one page with a magnifying glass placeholder icon. On a different page i have a text input specifically to receive barcode data.
I would like to differentiate these by using a barcode icon as the placeholder icon however the placeholder icons seem to be specifically using the Ionicon font instead of icons defined in CSS or something else.
Is there a way to define a custom icon that can be used as a placeholder icon?
I have custom tab icons defined like this:
.tabs .tab-item .icon.gmBagOn {
background-repeat: no-repeat;
background-position: 50%;
height: 70%;
background-image: url('../img/ic_shop_white_24px.svg');
background-size: contain;
}
I can reference these in the code like this:
<ion-tab title="Lookup" ui-sref="tab.lookup" icon-off="gmSearchOff" icon-on="gmSearchOn">
I tried defining it as just the icon name .icon.barcode and referencing it like:
<form class="padding" ng-submit="submit(searchUPC)">
<label class="item item-input">
<i class="icon ion-barcode"></i>
<input type="search" placeholder='' ng-model="inputs.textbox">
</label>
</form>
However this creates an empty placeholder. Also while trying to change the color of the place holder icon I found that it takes on the placeholder text color or the textbox fill color which makes me think it is actually using the font definition rather then an icon definition.
When I use Boostrap to create a date input field that has a limited width
<input type="date" id="my_date" name="my_date" class="form-control" style="width:80px">
the value (or the placeholder) are covered by the control icons when the field is focused; fine. But when the field is not focused, the place where the control icons are placed if focused takes white space.
Is there a workaround so that the field shows full content if not focused?
Try this code. When you hover the buttons are displayed. If the text is still hidden, try to make a smaller font, or less padding.
CSS
#my_date::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
#my_date:hover::-webkit-inner-spin-button {
display: block;
}
We can make HTML elements editable by using the contentEditable="true" attribute:
<div contentEditable="true">
This text can be edited by the user.
</div>
JS Fiddle
How can I make the blue box surrounding the element go away when the user edits the content?
I've tried using the :active and :hover pseudo-classes (along with border: none) to no avail.
This is not border but outline which you see on focus. You can try this:
div[contentEditable] {
outline: none;
}
Demo: http://jsfiddle.net/bxmr6gzg/1/
I'm trying to reproduce the input box behavior of stackoverflow where they place span text over an input box. It looks like the text is actually inside the input box, but is actually just a finely positioned span. They hide the span when the user types text into the field. To see the behavior in action, press "Ask Question" and then look at the "Title" input box. The text says: "what's your programming question? be specific".
I'm creating this for an ecommerce checkout page, so there will be multiple input boxes of different widths and positions.
As a CSS newbie, is there a way to create input boxes and then somehow attach a span to the left and vertical center of a input field? I suppose I could go through and position each one individually, so I'm hoping a class could be developed that would automatically attach a span to a previously defined input box. Does anyone have an elegant way to do this without custom positioning each one?
I just did this with a jQuery plugin.
I used JavaScript to automate this, but the same rules apply.
If you look closely, its not the span that is positioned. There's another hidden input.
<input type="text" tabindex="100" class="actual-edit-overlay" value="" style=" background-color: white; color: black; opacity: 1; width: 610px; height: 15px; " disabled="">
<input id="title" name="title" type="text" maxlength="300" tabindex="100" class="ask-title-field edit-field-overlayed" value="" style="z-index: 1; position: relative; opacity: 0.3; ">
<span class="edit-field-overlay">what's your programming question? be specific.</span>
If you inspect with firebug and set turn off the display:none;, you will see clearly the one textbox, another textbox and a span.