Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I'm looking for a way to make some CSS only apply if an input outside the style sheet has a certain value.
In the example below I only want to run the CSS if the input value below is "4625585".
It is from a form where the submit button sends the input value (among other things).
Is that possible at all when I only have access to CSS and not the HTML code of the form.
Kindly, Rasmus
-
Here is the CSS
<style type="text/css">
.wForm {
font-family: sans-serif;
}
</style>
<input value="4625585">
-
Here is the HTML:
<form>
<div id="tfa_6" class="wForm">
<input type="text" placeholder="Name">
</div>
<div class="actions">
<input type="submit" value="Submit">
</div>
<input value="4626442">
</form>
You can only apply CSS to a sibling that follows the element that's validated. Therefore I moved the input element with value 4625585 to the top in the form.
If you don't have access to the HTML, you will need javascript.
input[value="4625585"] ~ .wForm {
background: red;
}
<form>
<input value="4625585">
<div id="tfa_6" class="wForm">
<input type="text" placeholder="Name">
</div>
<div class="actions">
<input type="submit" value="Submit">
</div>
</form>
The issue was commented on and answered in a deleted threat. This short answer is "no, it can't be done".
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
What's a reasonable strategy for solving this problem that meets the understanding level of a novice coder?
Here's what I've tried so far for a writing a simple form: 1) write the html in its entirety 2) style it 3) try to change the html to suit the style methods I'm trying to apply
It doesn't work because I get confused about how I should structure the html hierarchy to suit the design parameters I have on paper.
Here's where I am: https://codepen.io/tapzx2/pen/wvMgGGY
<div class="baby-form">
<h2>Class Signup</h2>
<form action="#" method="post">
<ul>
<li>
<input type="text" name="first-name" id="first-name">
<label for="first-name">First Name</label>
</li>
<li>
<input type="text" name="last-name" id="last-name">
<label for="last-name">Last Name</label>
</li>
<li>
<input type="email" name="email" id="email">
<label for"email">Email</label>
</li>
<li>
<button type="submit">Register</button>
</li>
</ul>
</form>
Here's where I'd like to go: https://codepen.io/tapzx2/pen/qBbqxjX
<div class="content-container">
<h2>Class Signup</h2>
<div class="form-container">
<form>
<div class="question-container">
<div class="question">
<label for="first">First Name</label>
<input type="text" id="first" name="first">
</div>
<div class="question">
<label for="last">Last Name</label>
<input type="text" id="last" name="last">
</div>
<div class="question">
<label for="email">Email Address</label>
<input type="email" id="email" name="email">
</div>
</div>
<button type="submit">Register</button>
</form>
</div>
</div>
I struggled with this for a long time too. My CSS never had the effect that I wanted it to. Practice is key, but I find that when beginning, it is easier to take a "general-to-specific" or approach and style as you go.
Once you are comfortable with CSS, you can do all the HTML before you start styling. In the meantime, I recommend you style with each layer (see below).
For example, if I wanted to build what you've given as your end result I would do something like...
Create a wrapper that will contain all content, because everything will be centered. Set the width, display, etc. for the wrapper.
Inside the wrapper, add a <form>. Style the form if needed.
Inside the form, add a <header>, and inside the header, add an <h_> tag. The header isn't necessary, but it makes it easier to add other elements to the top of the form in the future.
Inside the form, create a <fieldset> followed by a button. Style the button. You can put the button in a footer if you want.
Inside the fieldset, create 3 input wrappers. Each will contain a label and an input. Style the wrappers.
Add the labels and inputs inside each wrapper. Style these and style the fieldset if needed.
I like to work downwards in layers, don't start working on new child elements until the layer is complete. I started with the "general" elements (ex. the main wrapper) and worked towards the "specifics" (ex. the labels, inputs, buttons). As you style each layer, be conscious of what will be in the next. Eventually you'll get the feel of what elements you need to have in place so that you can style properly.
this way:
see JS Code : there is only one const (myForm) needed for access every form elements.
Form elements necessarily need a name attribute (used on the submission), and their use is easy to match in JS to identify each element of the form
const myForm = document.getElementById('my-form')
myForm.onsubmit=e=>
{
e.preventDefault()
console.log( 'first-name = ', myForm['first-name'].value )
console.log( 'last-name = ', myForm['last-name'].value )
console.log( 'email = ', myForm.email.value )
}
#my-form {
width: 14em;
margin: 1em auto;
}
fieldset {
border: 1px solid lightblue;
padding: 1em .6em 0em .6em;
}
label {
display: block;
float: left;
clear: both;
min-width: 12em;
margin-bottom: 1em
}
button {
margin-top: 1em;
float: right;
}
<form action="#" method="post" id="my-form">
<fieldset>
<legend>Class Signup</legend>
<label>
First Name
<input type="text" name="first-name" >
</label>
<label>
Last Name
<input type="text" name="last-name" >
</label>
<label>
Email Address
<input type="text" name="email" >
</label>
</fieldset>
<button type="submit">Register</button>
</form>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
How to use radio button and images to make a similar webpage?
In this, I have made a label and din that I have added a radio button, an image tag, and spam for the name. Then I tried styling it using bootstrap.
Html:
<div>
<h2> Choose Accomodation Type </h2>
<div >
<label className="btn">
<input type="radio" name="test" id="option1" autocomplete="off" checked />
<img src={appartment} />
<span class="checkmark"></span>
<p>Apartment</p>
</label>
<label className="btn">
<input type="radio" name="test" id="option1" autocomplete="off" checked />
<img src={house} />
<span class="checkmark"></span>
<p>house</p>
</label>
</div>
<div>
<button className="btn btn-light btn-lg"> Cancel</button>
<button className="btn btn-outline-primary btn-lg"> Next </button>
</div>
img {
width:150px;
height: 150px;
margin:30px;
padding: 20px;
}
.btn{
margin: 15px;
padding: 5px;
}
[type=radio] {
margin:0;padding:0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
Add a label for your input.
Add visibility: hidden for the input.
Put a div inside the label and start styling. You can use :checked pseudo class to see if the radio button is selected.
HTML
<label for="my-btn">
<div></div>
</label>
<input id="my-btn" type="radio"/>
CSS
input {
visibility: hidden;
}
div {
/* custom styles */
}
input:checked div {
/* custom styles */
}
Now once you click on the label which contains your customized div, the radio button will be checked.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
<div class="ddown">
<button class="dbtn">ABC</button>
</div>
I want to make this div hide/show when a checkbox is checked/unchecked, how can I achieve this?
try The following code
<input type="checkbox" ng-model="chkCondition">
<div class="ddown" ng-show="chkCondition">
<button class="dbtn">ABC</button>
</div>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
Check to show/Hide a div:
<input type="checkbox" ng-model="chkCondition">
<div class="ddown" ng-show="chkCondition">
<button class="dbtn">ABC</button>
</div>
</body>
</html>
html
<input type="checkbox" ng-model="isChecked" />
<div ng-show="isChecked" class="ddown">
<button class="dbtn">ABC</button>
</div>
Try with using ng-if to avoiding DOM element creation.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<input type="checkbox" ng-model="isChecked">
<div class="ddown" ng-if="isChecked">
<button class="dbtn">ABC</button>
</div>
</body>
</html>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
It is a simple html code,when i open it in firefox,no alignment between the input lines.
<!DOCTYPE html>
<html>
<body>
<form action="">
First name(xing): <input type="text" name="firstname"><br>
Last name(min): <input type="text" name="lastname">
</form>
<p><b>Note:</b> The form itself is not visible. Also note that the default width of a text field is 20 characters.</p>
</body>
</html>
How can i make alignment in the form?
Try putting the text before the form input in a span tag and styling it:
<span style="display:inline-block; width:125px">First name(xing): </span>
<input type="text" name="firstname">
<br>
<span style="display:inline-block; width:125px"> Last name(min): </span>
<input type="text" name="lastname">
Note: you can only use the width attribute if you use the style "display:inline-block".
Another method of doing this is:
<input type="text" name="fname" placeholder="First name(xing)"><br>
<input type="text" name="lname" placeholder="Last name(min)"><br>
This is HTML5 placeholder property.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
i have tried all other way search on stackoverflow etc but couldn't found my answer
my div id is loginbox.
<div id="loginbox">
<form action="post">
<table>
<tr>
<td><label>Username:</label></td>
<td><input id="username" type="text" placeholder="username"/></td>
</tr>
<tr>
<td><label>Password:</label></td>
<td><input id="password" type="password" placeholder="password"/></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Login" /></td>
</tr>
</table>
</form>
</div>
I can't see your CSS, but considering just what's in your question, this should work:
#loginbox form table {
margin: 0 auto;
}
Demo: http://jsfiddle.net/TmY46/
And this isn't related to HTML5. It's purely CSS.
Depending on what exactly you want to have:
#loginbox table { margin:auto; }
or
#loginbox * { text-align:center; }
or
#loginbox table * { margin:auto; }
or any combination!?
First or all, you shouldnt use a table for that.
Anyway, something like that :
td{text-align:center;}
form input{display:block;margin:auto;}
If you really want to code in html5, i encourage you to use a different structure,
like :
<form>
<p><label>Username :</label><input type=text /><span style="clear:both"></span></p>
<p><label>Password :</label><input type=password /><span style="clear:both"></span></p>
<input type=submit vale="login" />
</form>
And in css :
form {margin:auto;}
form p{display:block;margin:3px 0;}
form input[type=text], form input[type=password]{float:left;width:150px;}
This is how i would do, it's cleaner and much flexible