This question already has answers here:
Using CSS :before and :after pseudo-elements with inline CSS?
(10 answers)
Closed 3 years ago.
<style>
::placeholder {
color: red;
}
</style>
<input id="date" name="date" placeholder="Please select release date" type="text"/>
this is my css. Is there any way to define this inline ? I mean with style = "" .
With CSS variables you can do like below but you need at least to define the style that you can change later:
::placeholder {
color: var(--c, red); /* The default is red */
}
<input id="date" name="date" placeholder="select date" type="text" >
<input id="date" name="date" placeholder="select date" type="text" style="--c:blue" >
Related
This question already has answers here:
Target the label of a checked input
(2 answers)
Closed 2 years ago.
I am trying make the text after input bold if input is checked but I am failing. I think my is not finding the text. I appreciate any help or hint.
input[type="radio"]:checked+ {
font-weight: bold;
}
<label for="radio-foobar">
<input type="radio" id="radio-3" value="3" />
Hello world!
</label>
focus-within and a transition hack can approximate this. The transition is to make sure the style is kept even if you click outside.
label {
font-weight: 400;
transition:0s 999s;
}
label:focus-within {
font-weight: 900;
transition:0s;
}
<label for="radio-3">
<input type="radio" id="radio-3" value="3" >
Hello world!
</label>
On html, it is needed to cover Hello World! into html tag like <span> and on CSS you can select that span next to checked input using + CSS selector.
input[type="radio"]:checked + span {
font-weight: bold;
}
<label for="radio-foobar">
<input type="radio" id="radio-3" value="3" />
<span>Hello world!</span>
</label>
This question already has answers here:
What do commas and spaces in multiple classes mean in CSS?
(9 answers)
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
CSS "and" and "or"
(9 answers)
Closed 2 years ago.
I have two forms, one that contains a form field for entering a username and a second form on another page where a user enters an email address:
<!-- user.html -->
<form action="/account/login/" method="post">
<div class="form-group mt-3">
<input type="text" name="username" autofocus autocapitalize="none" autocomplete="username" maxlength="150" placeholder="Username" class="form-control form-control-md" required id="id_username">
</div>
<p class="mt-4"><input type="submit" class="btn btn-block btn-primary" value="Login"></p>
</form>
<!-- email.html -->
<form action="." method="post">
<div class="form-group">
<input type="email" name="email" autocomplete="email" maxlength="254" placeholder="Email" class="form-control form-control-md" required id="id_email">
</div>
<input type="submit" value="Send Email" class="btn btn-primary btn-block">
</form>
I'm trying to style both input controls using multiple attribute selectors like this but it's not working. The styles aren't being applied.
// styles.scss
form input[type=text][type=email] {
background-color: #f0f0f0;
}
But if I separate the types into two separate rules like this, the styles do get applied properly.
form input[type=text] {
background-color: #f0f0f0;
}
form input[type=email] {
background-color: #f0f0f0;
}
The CSS documentation says this should work. What am I doing wrong?
As per the documentation this matches when type=email AND type=text which can't be true.
Here, the selector matches all SPAN elements whose "hello" attribute
has exactly the value "Cleveland" and whose "goodbye" attribute has
exactly the value "Columbus":
span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
You would need to include both versions;
form input[type=text],
form input[type=email] {
background-color: #f0f0f0;
}
Add a comma after input with the type of text.
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 2 years ago.
I have HTML structure that looks like -
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">TEXT A
</label>
</div>
I want that when the input type is checked (checked being the inbuilt class that is added automatically on checking the radio button ), I apply a style before label.
In unchecked case -
label::before{
/* something */
}
In checked case, I am writing something like this,
input[type='radio']:checked label::before{
/* something */
}
I want to apply label::before where input[type='radio']:checked but I don't know how to merge these two conditions in CSS. I just need help with the syntax.
Can anyone please tell me ?
Thanks !!
Solution
Use for attribute on label instead of nesting input inside of the label in order to use the the adjacent sibling combinator.
Example
HTML
<div class="form-check-inline">
<input type="radio" class="form-check-input" name="optradio">
<label class="form-check-label" for=“optradio”>
TEXT A
</label>
</div>
CSS
input[type='radio']:checked + label::before{
/* something */
}
References
Adjacent sibling combinator: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
This question already has answers here:
How do I override default PrimeFaces CSS with custom styles?
(5 answers)
Closed 7 years ago.
I have been trying to apply style class to my input text but I am unable to do it .
<h:form id="SearchPageForm">
<br />
<p:outputLabel>Search: </p:outputLabel>
<p:inputText id="search" styleClass="text-input" size="123"
value="${SearchController.employeeBO.employeeID}" />
<h:commandButton value="submit" image="images/search.png"
style="vertical-align: top;" action="#{SearchController.searchOnId}" />
<br />
<br />
This is my HTML and my CSS says
.text-input{
background-color:#fbfbfb;
border:solid 50px #000000;
margin-bottom:8px;
width:750px;
padding:8px 5px;
color:#797979;
}
I did the inspect on the form and I see it is still calling the default CSS of primefaces.
<input id="SearchPageForm:search" name="SearchPageForm:search" type="text" size="123" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all text-input" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false">
I want to increase the size of Search Form to 750px .
I am new to CSS and HTML so might have missed something .
Regards
To debug the css properties you could use the function "inspect element" that all browsers have, and so you can see if the css properties are being aplied.
This question already has an answer here:
input[type=number] placeholder color in FF29+
(1 answer)
Closed 8 years ago.
Is it possible to style the placeholder of an input field with type number in firefox?
Example code:
<input type="text" placeholder="foo">
<input type="number" placeholder="foo">
css:
input::-moz-placeholder {
color: red;
}
input:-moz-placeholder {
color: red;
}
http://codepen.io/anon/pen/yEtFB
In webkit the placeholder get's styled corretly. (with the webkit prefixed placeholder style)
You can achieve it by using below code. A working Demo
input[type="number"]
{color:red;}
Note:
In chrome it will not reflect until you define a initial value like below.
<input type="number" placeholder="foo" value="5">