Using ONLY CSS and HTML to set "required" attribute for texarea if radio button is checked

link css to html
css file example
add css class to html
create css file
external css
css examples with source code
internal css in html
css path in html

I need to add the attribute ":required" on a textarea if a radio button is checked; I cannot use javascript, only css and html, is it possible?

practically if the radio button is checked the text area have to be filled, otherwise it can be empty thanks in advance

As I said in comments:

it's not possible without JS. HTML/CSS do not have such if/else capabilities


The only thing I could come up with, without using JS

is to eventually use two textareas and some CSS adjacent selectors ~, and have the hidden required textarea already prefilled with a value:

[name='agree']:checked ~ [name='text_req'] { display: inline-block; }
[name='agree']:checked ~ [name='text']     { display: none; }
<form>
  <input name="agree" id="agree" type="checkbox"><label for="agree">I do</label>
  <br>
  <textarea name="text" placeholder="Explain why"></textarea>
  <textarea name="text_req" class="hide" required hidden>You must explain why</textarea>
  <br>
  <button>SUBMIT</button>
</form>

Using CSS without HTML, Basically, this is the first trick I used; I just took it one step further. I didn't bother to specify a DOCTYPE, let alone a <title> , and simply used no HTML at all. Never� We will start with a style sheet embedded inside the HTML file. Later, we will put the HTML and the CSS in separate files. Separate files is good, since it makes it easier to use the same style sheet for multiple HTML files: you only have to write the style sheet once. But for this step, we just keep everything in one file.

Css controls only the styles not the validation so you cannot validate your form with the css.

Fill a page with boxes using only CSS and HTML, If these "boxes" are just visual elements, you can use a 5px by 5px background image, and then set background-repeat: repeat; in the CSS. div { width: 100px� Get started with web development by learning how to use HTML, CSS, and Javascript to build a website, use developer tools in the browser to check your work, and use Git to collaborate and recover from problems when they occur.

It's already been pointed out that you should not use CSS for validation. That said, you can effectively disable the textarea using pointer-events: none. Check this out:

/* disable the textarea by default */
[name='text'] {
  pointer-events: none;
  opacity: 0.5;
}
/* enable it when input is checked */
[name='agree']:checked ~ [name='text'] {
  pointer-events: all;
  opacity: 1;
}
<form>
  <input name="agree" id="agree" type="checkbox"><label for="agree">I do</label>
  <br>
  <textarea name="text" placeholder="Explain why"></textarea>
  <br>
  <button>SUBMIT</button>
</form>

HTML Styles CSS, An inline CSS uses the style attribute of an HTML element. The following example sets the text color of the <h1> element to blue, and the text color of the < p>� Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

How To Create a Responsive Dropdown Navigation Using Only CSS, Basic knowledge of HTML and CSS is required to follow along. The top navigation bar is vital for any website. Most of the sites have a similar� i just want to make a slider with. html and css, ut actually it’s not working .i use it into my project ,in twig template in my own theme . so any one solve the problem ? so plz connect with me in whatsapp 8016420609. or email address:-sahinsab391@gmail.com. Reply Cancel

Responsive Services Section Using Only HTML & CSS, How to create Our Team Section Using HTML and CSS - Duration: 14:05. Coding Market 21 Duration: 11:04 Posted: 17 Feb 2019 Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones. You can also use media queries to specify that certain styles are only for printed documents or for screen readers (mediatype: print, screen, or speech).

Applying color to HTML elements using CSS, With CSS, there are lots of ways to add color to your HTML elements to create just the look you want. This article is a primer introducing each of� This CSS shorthand for the margin property would set the top and bottom margins to a value of 0, while the left and right would use "auto." This essentially takes any space that is available and divides it evenly between the two sides of the viewport window, effectively centering the element on the page.

Comments
  • I don't think it's possible without JS. HTML/CSS do not have such if/else capabilities
  • thanks Roko....it seems that there is not a possible way....but your suggestion gave me an idea for a work around.
  • To apply your styles for each one of them like a background color,... etc