i have this search bar in my application which i want to modify:
Right now the "X"-Icon is visible from the beginning even tho it does nothing before an input was done, so i want to make it appear AFTER the user starts entering text.
The icon is a SVG i added and styled seperatly.
I don't realy know how i can do this, i thought its easy and i can just use something like "::after" but it seems that this it not possible with input fields.
Ps.: im an absolute beginner in CSS so please have mercy.
Best way to achieve your requirement would be to have different classes which shows/hides the icon by checking when input is not empty in JS.
If you want to achieve without using JS you can target the adjacent button element when the input is focussed and add ::before pseudo element and style it.
input:focus+button:before {
content: "X";
position: absolute;
left: 0;
color: red;
}
It's not possible with CSS. You would have to use Javascript.
Javascript
// set the id of the x button to x-button
// set the id of the input field to input
var x_button = document.getElementById("x-button");
var input = document.getElementById("search-input");
input.oninput = function(){
if(this.value) x_button.classList.add("visible");
else x_button.classList.remove("visible");
}
CSS
.x-button { display:none;}
.visible {display:block;}
it is possible if you wanna do it using only css.
#Search{
font-size:22px;
color:green;
background-image:url('images/search.jpg');
background-repeat:no-repeat;
background-position:center;outline:0;
}
#Search::-webkit-search-cancel-button{
position:relative;
right:20px;
}
<input id="Search" name="Search" type="search" placeholder="Search" />
Related
I cannot edit the html code, is the question below possible using only "CSS" code?
How do you add a text just like a placeholder or something to an inputbox?
Here's the input text box code:
<input id="isn_email_address" type="text" name="user" size="40" maxlenth="90">
You can't set placeholders using CSS for all browsers. The only browser that supports it at the moment is webkit.
Using jQuery you can achieve this : Working DEMO
Note : you will need latest jquery library you can download from here jQuery Library
Try this code :-
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type = "text/javascript">
$(document).ready(function()
{
$('#isn_email_address').attr("placeholder", "Type your text here");
});
</script>
</head>
If you don't want to use placeholder,obviosly there is other way.I don't know wheather it's possible with css alone.But using javascript and css you can definitely do that.
You could use some pseudo elements, assuming you're not supporting IE7 and below.
#isn_email_address {
position: relative;
}
#isn_email_address:after { /*could use :before if you wanted too*/
content: "Type your text here";
display: block;
}
#isn_email_address:focus #isn_email_address:before {
display: none;
}
You'll probably need to do some z-index adjustment to make sure that you're able to select the textfield. Additionally, some css *left: /my value here/* to make sure it's in the right spot.
Chrome has apparently added a dropdown arrow to text inputs that reference a <datalist>. It's appearing in Chrome 34 (Canary) but not in the current stable build (Chrome 31).
It appears only when the text field is focused (see update) and is applied to both input types text and search.
It could be worse as far as native browser implementations go, but as you can see in the image, it conflicts with my design specs.
Does anyone know how to remove or replace this new feature?
<datalist id="list"><option value="foo"><option value="bar"></datalist>
<input type="text" list="list" name="field" maxlength="50" autocomplete="off" spellcheck="off" placeholder="Jump To">
Update:
The arrow also appears when the field is hovered (not just focused) and unfortunately also has its own background color when the button itself is hovered:
Thanks to the comment by alexander farkas, here is the style rule to remove the arrow:
input::-webkit-calendar-picker-indicator {
display: none;
}
As others have mentioned ::-webkit-calendar-picker-indicator { display: none } works at removing the arrow it would also impact the html5 datepicker on a <input type="date">,
To remove just removing the datalist input would be:
[list]::-webkit-calendar-picker-indicator {
display: none;
}
Thanks to Cantera. I didn't want to get rid of the black arrow entirely, just the gray square surrounding it.
input::-webkit-calendar-picker-indicator {
background-color: inherit;
}
input::-webkit-calendar-picker-indicator {
opacity: 0;
}
Also removed the arrow for me and I found created a better clicking experience to still click where the arrow would be, you can even increase the the width and height of it > 1em and in the input maybe put a custom arrow as a background image, where the arrow would be.
input::-webkit-calendar-picker-indicator {
opacity: 0;
}
It's work for me; (use display:0 not work on chorme)
datalist::-webkit-calendar-picker-indicator {
display: none;
opacity: 0;
}
It is okay but this css code will hide any calander on page.
Like I'm using datepicker calender and this will also hide the controls including datalist and datetime picker.
Set the list option of parent input to be empty, <input list="" ... /> , eg :
<input
list=""
name="option"
id="input"
autocomplete="off"
>
<datalist id="datalist">
<option>Carrots</option>
<option>Peas</option>
<option>Beans</option>
</datalist>
see mdn customizing_datalist_styles example
try -webkit-appearance: none that should remove the default styles
Please find the code here
I toggle a class min upon button click. To show this the color is toggled. Is there a way to add an icon to the button, which toggles for example between: icon-double-angle-right and icon-double-angle-left. I linked Font-Awesome CDN. I only care about recent browser, so mainly looking for pseudo elements based sol.
You can achieve this with pseudo attributes :
CSS :
btn.min { background:red; }
.btn:after {
content: attr(data-active-icon);
font-family: 'FontAwesome';
}
.btn.min:after {
content: attr(data-inactive-icon);
font-family: 'FontAwesome';
}
HTML :
<button class="btn" ng-class="{min: min}" ng-click="toggle()" data-active-icon='' data-inactive-icon=''></button>
Where your data-active-icon and data-inactive-icon is taken from this table.
Demo : http://jsbin.com/ariwij/1/edit
I haven't included bootstrap in the demo, but it will integrate just fine.
Make your HTML like this: <button class="btn" ng-class="{min: min}" ng-click="toggle()"><span class="arrow-left"></span></button>
Then use javascript or jquery to replace the class on the <span> with a different class on toggle. Then make your two CSS class rules, one with background image for your left facing arrow, one for your right facing arrow, or whatever the stylistic thing it is you want to achieve.
consider that your button is #butt:
$("#butt").click(function(){
$(this).toggle('red');
})
and CSS:
.red{
color:red;
}
To toggle an icon via class, have a look here:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_like_dislike
I have a Submit Button like this:
<input type="submit" data-corners="false" id="code_check_button" tabindex="5" data-rel="external" value="GO">
which - with a custom css theme - outputs this: http://sht.tl/59y3m
Now I would like to use the id (#code_check_button) to style the button with more specificity.
Unfortunately jquerymobile automagically transforms the input type submit in a snippet of code I cannot control: http://sht.tl/cQq
As you can note, the original button ID is useless...
Can you tell me how may I custom style that button (of course, without wrapping it in an extra tag...)?
Thank you!
Numerous ways this can be achieved..
Here are a few examples:
submit {
styles:styles;
}
Not the most compatible in older browsers:
input[type="submit"] {
styles:styles;
}
Then you can target the ID:
#code_check_button {
styles:styles;
}
In your stylesheet add the ID #code_check_button and provide the desired style you want.. see example below :-
#code_check_button {
your desired style properties here...
}
EDIT:
You can use the class of the generated div and style the button accordingly. In this generated snippet you have two elements to style. please find below :-
.ui-btn {
style properties here...
}
.ui-btn .ui-btn-text {
style properties here...
}
CSS
#code_check_button {
color:#000 !important;
width:200px !important;
}
You can see I have added !important tag in all the css properties. This is because of overwritten the jQ mobile default styles.
If something keeps changing your intended css into useless code, this may be a situation where you would resort to simple text (eg. nano for mac or notepad for windows) Web design programs are double edged swords, most of the time the bells and whistles on these programs help make things easier, but sometimes they can make things more complicated. To custom style a button all you have to do is put your id or class selector name in the input tag and then enter the css for it. For example
CSS
#code_check_button { background-image: url(/*desired image url*/);
background-color: /*desired background color*/;
color: /*desired font color*/; }
HTML
<input id="code_check_button" type="submit" name="submit">
Just try it in notepad this time.
I need a button-like control that has a checked property, so that when clicked it stays pressed. Something like the "Purge responses" button in the example image below.
How can I do this in CSS? I'm a CSS newbie. Can someone provide an example or point to one that is similar to this?
PS: I know that I need to use Javascript to update a boolean variable that holds the state of the button, and dynamically apply a style to the button. My problem is more like how to create a button that contains a checkbox , as I have only one image for background.
http://i.stack.imgur.com/vBV6F.png
As for CSS you can do the following:
<style type='text/css'>
/* this is the style of an unchecked "button" */
.input-check{
display:inline-block;
height:20px;
padding:5px 8px;
background:green;
width:70px;
color:white
}
/* This is the style for a checked "button" */
.input-check.checked{
background:red;
color:black;
font-weight:bold
}
/* Hide the checkbox */
.input-check input{
display:none
}
</style>
Next is the HTML. To reduce JavaScript coding, it's best to nest a checkbox inside a label. This will make it automatically handle the checking/unchecking of the checkbox when you click on the label.
<label class="input-check"><input onchange="change_state(this)" type="checkbox" value="something" name="test"/> click me </label>
Finally the JavaScript:
<script type="text/javascript">
/* If you have more experience in JavaScript, I recommend not binding the change event this way, I didn't bother much about this part, since I guess it isn't part of the question */
function change_state(obj){
if (obj.checked){
//if checkbox is being checked, add a "checked" class
obj.parentNode.classList.add("checked");
}
else{
//else remove it
obj.parentNode.classList.remove("checked");
}
}
</script>
This is a jsFiddle for you to test.
Why don't you just style a checkbox to look like a button?
Then you can use the :checked CSS psudeo selector to style it the way you want without adding classes through javascript.
Here's an elaborate example in CodePen: http://codepen.io/arjabbar/pen/csafj
See the section here titled checkbox button. If I'm understanding your question correctly, that seems to do what you're after, maybe with a little modification.
No CSS needed, if I understand what you want correctly
<button><input type="checkbox" /> Purge</button>
Then you'll likely need javascript to check and uncheck the box when the button is clicked, but the above is the basic idea.
Here's with a bit of quick js
<html>
<head>
<script type="text/javascript">
function check() {
var c = document.getElementById('check') ;
c.checked = (c.checked) ? false : true ;
}
</script>
</head>
<body>
<button onclick="check()"><input type="checkbox" id="check" /> Purge</button>
</body>
</html>