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.
Related
I'm making a site from an html5up template, and there is a part of the html that has a diamond icon class in a span that I would like to change with my png logo.
The diamond icon is not in the pictures folder nor the css so I'm not sure how I would effectively replace the image in the circle? Its as follows:
<div class="logo"> <span class="icon fa-diamond"> </span> </div>
Just wondering in which folder I would place my image, would it be the SASS code? Java?
If you need anymore information let me know.
This icon is not a image. This is font named: Font awesome. If you want to replace this icon just remove this class from span and add your img by
<span class="logo"> <img class="logo__img" src="/img/yourimg.img" alt="this is your image"><span/>
Look at your template default style.css file and check class="icon fa-diamond" styles and copy it to your img.png, but be sure that you change the font-size style to height of your image.
.logo {
/* replace this value to a value from Font Awesome icon style*/
width: 2rem;
height: 2rem;
}
.logo__img {
display: block;
width: 100%;
}
In dijit toolbar the default icon size is 16x16 px
I would like to make a toolbar with icons with size 20x20 (or bigger so it will be more comfortable for user).
I've created new icons and added them to the CSS but I'm not sure how to re size the toolbar itself to show 20x20 icons.
Here is example how I create toolbar today:
http://jsfiddle.net/D4BVT/
<div id="toolbar1" data-dojo-type="dijit/Toolbar" style="background-color:inherit;background-image:none;border-bottom:0px;">
<div data-dojo-type="dijit/form/Button" id="toolbar1.cut" data-dojo-props="iconClass:'PanIcon', showLabel:false">Cut</div>
<div data-dojo-type="dijit/form/Button" id="toolbar1.copy" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCopy', showLabel:false">Copy</div>
<div data-dojo-type="dijit/form/Button" id="toolbar1.paste" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconPaste', showLabel:false">Paste</div>
<!-- The following adds a line between toolbar sections-->
<span data-dojo-type="dijit/ToolbarSeparator"></span>
<div data-dojo-type="dijit/form/ToggleButton" id="toolbar1.bold" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconBold', showLabel:false">Bold</div>
</div>
The default icons are only 16px (height of them is 18px in CSS), if you want to use bigger icons, then you will have to create custom icon classes in CSS with these bigger icons.
For example:
.customCutIcon {
background-image: url("http://url.to/your/cut-icon.png");
width: 32px;
height: 32px;
}
And then you can use that as your iconClass in your data-dojo-props. The toolbar will automatically adapt to this new height. I also updated your JSFiddle. I used colors in this example, but you can also use icons.
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';
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.
I have a span like this
<span class="ui-icon ui-icon-circle-close"></span>
which gives display a close icon of color same as the theme color.
But want to use the red icons which are available for the error.
Which jquery class should I use for that.
I found a class in Jquery css
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon
{background-image: url(images/ui-icons_cd0a0a_256x240.png); }
this image is the image which contains jquery red icons .
But I cant use it.
The span's class only determines the icon.
Set the "ui-state-error" on its parent to change the icon's color to red.
Check the icon example here: http://jqueryui.com/themeroller/ (the bottom of the right sidebar).
When trying to use such icons before text, I got line break problems and a bad alignment between the icon and the text.
To avoid the icon to add a line break, use
<span class="ui-icon ui-icon-name" style="display: inline-block;"></span>
To get a better alignment for the text, use the following
<span class="ui-icon ui-icon-name" style="display: inline-block;"></span>
<span style="display: inline-block; overflow: hidden;">Your text</span>
If You want just icon with other color, not whole box as is the example here:
http://jqueryui.com/themeroller/, in bottom right conner
add this to anywhere in Your .css file:
.ui-icon-red { width: 16px; height: 16px; background-image: url(images/ui-icons_red_256x240.png); }
The name and path of the file are depend of the color what You wanted.
And in html:
<div class="ui-icon-red ui-icon-circle-zoomin">
<span class="ui-icon ui-icon-alert"></span>
should do it.
Edited because I think I now found the right class.
Apply ui-state-error to the layer containing the icon(s) and remove the default background and border:
CSS:
.error-state-icon.ui-state-error {
border:none;
background:none;
}
HTML:
<div class="ui-state-error error-state-icon">
<span class='ui-icon ui-icon-info'></span>
</div>
Demo >>