This question already has answers here:
Select elements where attribute is non-empty
(3 answers)
CSS selectors - how to select 'for' in CSS?
(3 answers)
Closed 4 years ago.
I know that input[type="text'] is used to select <input type="text"/>, what does input[text] mean?
This snippet appear in angular tutorial:
body, input[text], button {
color: #888;
font-weight: Cambria, Georgia;
}
Angular tutorial (At buttom of that page)
input[text] means that inputs with attribute text assigned to whatever will be returned:
<input text="123">
<input text="">
<input text>
but this won't be
<input type="text">
Proof:
console.log(document.querySelectorAll('input[text]'))
<input text="123">
<input text="">
<input text>
<input type="text">
Why it is like that in Angular tutorial? Probably a simple typo. They anyway don't have inputs in the provided example.
Related
This question already has answers here:
Is there a CSS selector by class prefix?
(4 answers)
Closed last month.
For radios having different name attribute like(code is in pug format)
input.radio.(name='value1' type='radio')
input.radio(name='value2' type='radio')
how to select all of these with on selector, something like
.radio[name = 'value1'], .radio[name= 'value2']{code}
but if I do like this the code gets too long for more radios.
Is there any other way to do this ?
You can use the * wildcard to select based on a specific attribute. Here is a simple example of using wildcard with input elments.
It selects all the elements containing the word input in the name attribute.
Read more about wildcard.
input[name*="input"]{
width:20px;
height:20px;
}
<input type="radio" name="input1"><br>
<input type="radio" name="input2"><br>
<input type="radio" name="input3"><br>
<input type="radio" name="input4"><br>
<input type="radio" name="input5"><br>
So I'm trying to add some additional CSS on Wordpress and override the color of this form button but nothings happening. Am I entering the right code in here?
When I inspect the button this comes up...
<form id="mc4wp-form-1" class="mc4wp-form mc4wp-form-1527" method="post" data-id="1527" data-name="Get Started"><div class="mc4wp-form-fields"><div class="input-group">
<div class="input-icon"><i class="far fa-paper-plane"></i></div>
<input type="email" placeholder="Your email address" class="form-control" name="email" data-error="e-mail field is required" required="">
<button type="submit" value="Subscribe" class="item-btn">Subscribe</button>
</div></div><label style="display: none !important;">Leave this field empty if you're human: <input type="text" name="_mc4wp_honeypot" value="" tabindex="-1" autocomplete="off"></label><input type="hidden" name="_mc4wp_timestamp" value="1635448917"><input type="hidden" name="_mc4wp_form_id" value="1527"><input type="hidden" name="_mc4wp_form_element_id" value="mc4wp-form-1"><div class="mc4wp-response"></div></form>
The reason why I've tried button.item-btn::before is because it shows this in the inspector
Try adding the CSS styling as inline with the button element.
Inline styling will override the styling from an external css file.
You can also try using the id selector id=mc4wp-form-1 in your form element to increase the css style specificity to help overwrite the default.
Your selector minus the pseudo-element should do the job.
Maybe there is another background-color definition for buttons in your stylesheets with higher specificity.
You could try raising the specificity of your selector like this:
#mc4wp-form-1 button.item-btn {
background-color: mycolor;
}
I am trying to style an element only when that element has a value attribute.
The value attribute is variable (it's a date), but it's the only thing that changes between "no value" and "has value" which I need to style differently.
Is it possible to use a wildcard in the CSS selector ascertain whether the value attribute is present? E.g:
HTML
<input class="thing" value="variable-something">...</input>
<input class="thing">...</input>
CSS
.thing[value="*"] {
...
}
OR
.thing[value=*] {
...
}
I've tried this solution but use of the " makes it look for a specific string. Doing .thing[value=*] is invalid and won't compile.
Any advice?
<input type="text" value="">
<input type="text">
input[value]{
background: #ccc;
}
Try it yourself https://jsfiddle.net/55rjf0y8/
You can use below code
input[value]{background: red;}
<input type="text">
<input type="text" value="">
This question already has answers here:
How to position two elements side by side using CSS
(12 answers)
Closed 8 years ago.
I want to archieve the following:
I have a text wrapped in a p-tag and a submit-button together with a hidden input-field wrapped in a form-tag.
I want the text in the <p> tag and the button to appear in the same line, how can I do this (with css)?
<p>This is a example message text.</p><form method="POST"></input><input type="hidden" name="delete_message_id" value=" 1 "></input><input type="submit" value="delete"></input></form>
Since I want the hidden input field to be sent along with the submit event, I can not just leave away the wrapping form-tag.
Both <p> and <form> elements are displayed as block elements by default.
Change the 'display' CSS property to have them display inline:
p, form{
display: inline-block;
}
Also, <input> tags are self-closing; you don't include </input>. (Even you did, you have a further invalid </input> tag right after opening your <form>).
JSFiddle
try adding this css style
<style>
p {
display: inline;
}
</style>
or just set the element style
<p style="display: inline;">This is a example message text.</p><form method="POST"></input><input type="hidden" name="delete_message_id" value=" 1 "></input><input type="submit" value="delete"></input></form>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Radio buttons and label to display in same line
I have 3 labels and radiobuttons that i want to put on 1 line:
What i get now is this:
Spoortoegang
Uit
radiobutton
Aan
radiobutton
What i want is:
Spoortoegang Uit radiobutton Aan radiobutton
My code for this is:
<div ><p>Spoortoegang</p><label for="no">Uit;<input dojoType="dijit.form.RadioButton" id="valSR" name="group1" checked="checked" onchange='POI(this);' value="Show" type="radio"/> </label>
<label for="yes">Aan;<input dojoType="dijit.form.RadioButton" id="valSlope" name="group1" value="Hide" onchange='POI(this)' type="radio"/></label></div>
add "float: left" in css for all elements
Use CSS for positioning DOM elements. As you want all elements to be inline:
p, label, input { display: inline; }
instead of putting it in a paragraph enclose it in a span like
<div ><span>Spoortoegang</span><div >