I've the input buttons without any class or id and have onclick attr on that something like this:
<input type="button" onclick="myfunc();" />
And there are other input type buttons too and want to style to the buttons which have onclick attribute.
So, here I can do like this:
input[onclick="myfunc();"]{color: red;}
But in the onclick there may be any function like myfunc(), thisfunc(), or anyfunc().
So how can I select those input buttons which have onclick attribute.
The value can be omitted:
input[onclick]{color: red;}
On an unrelated note, this seems like an interesting use case. I would probably use something like this, perhaps styling the border or something instead of the text, in order to highlight form elements (or any other elements) with event handler attributes, for "debugging" purposes.
$(function(){
$("#mybutton").click(function(){
$(this).css("color","red");
});
});
You can also JQuery for your solution. Add attribute id="myButton" to your input button.
Related
Is there some sort of state(like :hover, :focus, :active) for when typing in an input field only using CSS or does this have to be done in another way like JavaScript?
What I want to achieve is to only display a character counter when someone is typing.
There is no state in css when typing in an input field.
Please see the link for more info about pseudo classes
https://www.w3schools.com/css/css_pseudo_classes.asp
The state for input when typing is possible in javascript.
Please see the code below.
document.getElementById("demo").addEventListener("keypress", myFunction);
function myFunction() {
alert("Someone is typing");
}
<input type="text" id="demo">
You can see more info about onkeypress in this link
https://www.w3schools.com/jsref/event_onkeypress.asp
Hope this helps.
I was thinking that there's only two ways to focus element - using JavaScript, or in case it's a div with an contenteditable attribute. But this time I tried something different: I tried to effect input[type="text"] within a div (without contenteditable) using the parent.
I know that when a child element is focused, the parent is focused too - I mean, If I have the following example:
<form action="/" method="get">
<input type="text" placeholder="Hi I'm Text!" />
</form>
When I focus on the textbox, the form will be focused too. I can do the following:
form input[type="text"]:focus {
/* CSS goes here */
}
But I can not do something like this:
form:focus > input[type="text"] {
/* The same CSS goes here */
}
I already solved my own problem, but I wonder why it can not work this way. As I said (and feel free to correct me if I'm wrong) - when I focus on the input, I'm automatically focusing the parent element too (and it's own parent element, etc.) So why can't I simply use :focus on the parent, and then effect the child?
You can't focus on a form element. If you want, you can add it the tabindex attribute, such as <form tabindex="0">.
Forms are containers for controls and as such not expected to be getting direct user interaction.
According to W3C, users should interact with forms using controls.
Reference:
https://www.w3.org/TR/html401/interact/forms.html#form-controls
I'm trying to implement ng2-completer component in my Angular2 application.
The conponent works properly but the style of the search textbox is flat...
I want to have the same style of bootstrap components, like textbox for example.
This is the code:
<ng2-completer [(ngModel)]="searchStr" [ngModelOptions]="{standalone: true}" [datasource]="searchData" [minSearchLength]="0" (selected)="onSelected($event)"></ng2-completer>
This is the rendered control:
As you can see, the list of color is ok but the input where the user write the value to search is completely flat...
How can I move to fix the problem ?
Basically I just want to set it like the field "Titolo" on the right.
Thanks
Just add [inputClass]="['form-control']" in the selector.
For example:
<ng2-completer [inputClass]="['form-control']" [(ngModel)]="searchStr" [ngModelOptions]="{standalone: true}" [datasource]="searchData" [minSearchLength]="0" (selected)="onSelected($event)"></ng2-completer>
Note: form-control is here a class of Bootstrap
put class="form-control" to your textbox ,(class)="form-control" in your case i guess
Is it possible to put the angular ui typeahead results in a separate div on the page instead of the default. I have seen this SO post AngularJS typeahead search results in a div but wondering if anybody have already tried this.
Search for $document.find('body').append($popup); in the typeahead.js.
If the typeahead-append-to-body attribute that is by default set to False changes to True, the result will be append to the <body>
<input type="text" typeahead-append-to-body="true">
If you change the $document.find('body').append($popup); to something like $document.find('#myElement').append($popup); , the result will be append to the element with id #myElement.
You can define your attribute , something like typeahead-append-to-myElement
Hi i have a textbox which i am using as a counter to show how many characters are still allowed in another textbox. I have made it read only and its background transparent so that you cant tell it is a select box. The only problem is you can still click on it or tab to it. Is there a way to do this so it appears just like normal text and people cant click on it or tab to it?
If this is an Asp.Net Web Control set it's Enabled property to false
<asp:TextBox Enabled="false" />
If it is HTML you can do this:
<input type="text" disabled />
Just replace the input element with a span element or some other non-input element. This requires a trivial change to your JavaScript; you would assign to the innerHTML property of the element rather than value. Then the content will appear as normal text, and you can style it as desired.
you need some style with css and some trick with Jquery.
CSS
.readonly{
border:none;
background:#aaa;
}
Jquery
$(".readonly").focus(function(){
$(this).blur();
});
now just add class="readonly" to your textbox.
<asp:TextBox cssClass="readonly" />
check demo here .