Modal positioning in tailwind solidjs app - modal-dialog

i have some issues with positioning my modal. I spend lot of time trying to swipe my modal component between other components to get better result but right now i don't really know how to fix it. I have a signup form and I want to trigger the modal in the center of the screen when user click on the button below. Problem is, modal is not opening in the center, its opening from position it was triggered.
I have to use absolute class because if I wont, modal is not overriding the page. Any suggestions?
Here is the modal code
import { Component, createSignal } from "solid-js";
const TermsModal = function () {
const [isOpen, setIsOpen] = createSignal(false);
return (
<div class="flex absolute justify-center">
<button
class="text-sm font-bold text-blue-500 uppercase focus:outline-none"
onClick={() => setIsOpen(true)}
>
Privacy Policy
</button>
{isOpen() && (
<>
<div
role="presentation"
class=""
onClick={() => setIsOpen(false)}
onKeyPress={(e) =>
(e.key || e.code) === "Escape" ? setIsOpen(false) : null
}
></div>
<section
role="dialog"
class=" p-4 text-center border-gray-200 rounded-lg shadow sm:p-8 bg-zinc-700"
>
<button aria-label="Close Dialog" onClick={() => setIsOpen(false)}>
&times Close button
</button>
{/* Here starts modal content */}
<h1>Terms of Service</h1>
{/* Here ends modal content */}
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi
quaerat totam cumque hic voluptatum sit ratione itaque aspernatur,
possimus ex beatae quo repudiandae dignissimos iure eum
exercitationem labore, corrupti adipisci.
</p>
</section>
</>
)}
</div>
);
};
export default TermsModal;
And here is how i am calling a modal. Its inside the input form together with checkbox. (I also want to make it in one line, but failed)
<label class="text-white m-5 p-1">
<input type="checkbox" checked={false} onChange={handleCheck} />
I have read and agree to the <TermsModal />{" "}
</label>

That is probably because you are rendering the modal window as a child component of some element. You need to use Portal to render the modal window as a direct child of the body element so that it won't be affected by its parent's z-index or other css properties.
import { render, Portal } from "solid-js/web";
const style = `
border: 1px solid red;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
flex-flow: column no-wrap;
align-items: center;
justify-content: center;
`
const Component = () => {
return <div style={style}>Inner Content</div>
};
const App = () => {
return <Portal mount={document.body}><Component /></Portal>;
};
render(() => <App />, document.body);
https://playground.solidjs.com/anonymous/13e0670c-79e3-4899-8ed0-151dd531e8c2
You can learn more about Portal:
https://www.solidjs.com/docs/latest#portal
https://www.solidjs.com/tutorial/flow_portal?solved
If you don't want to use a portal and don't need reactivity inside the modal window, you can use onMount hook to append the modal window to the body element and onCleanup to remove it.
import { batch, createSignal, onMount, onCleanup } from "solid-js";
import { render } from "solid-js/web";
const style = `
border: 1px solid red;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
flex-flow: column no-wrap;
align-items: center;
justify-content: center;
`
const Component = () => {
const modal = document.createElement("div");
modal.innerHTML = "Some Content";
modal.setAttribute("style", style);
onMount(() => {
document.body.appendChild(modal);
});
onCleanup(() => {
document.body.removeChild(modal);
});
return null;
};
const App = () => {
return <Component />;
};
render(() => <App />, document.body);

Related

html form action not running in vs code webview api

I am trying to create a visual studio extension. This extension gives the user an input form and calls the api when user hits submit button.
But the api is not getting hit in the form action method
Below is extension.js file
// #ts-nocheck
// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
const vscode = require('vscode');
const fs = require('fs');
const path = require('path');
const { parentPort } = require('worker_threads');
// This method is called when your extension is activated
// Your extension is activated the very first time the command is executed
/**
* #param {vscode.ExtensionContext} context
*/
function activate(context) {
console.log('Congratulations, your extension "Unit Test Generator" is now active!');
let disposable = vscode.commands.registerCommand('testytest.createBoilerplate', function () {
vscode.window.showInformationMessage('Unit Test Generator is now active!');
createInputFormWebView();
});
context.subscriptions.push(disposable);
}
function createInputFormWebView()
{
const panel = vscode.window.createWebviewPanel(
'This webview will be used for taking user input for the type of test cases', // Identifies the type of the webview. Used internally
'Unit Test Generator', // Title of the panel displayed to the user
vscode.ViewColumn.One, // Editor column to show the new webview panel in.
{
enableForms:true,
enableScripts: true
} // Webview options. More on these later.
);
const htmlFormContent = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Input</title>
<style>
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #1b78cc;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #527ba1;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<div class = "container">
<form enctype="multipart/form-data" action="http://localhost:35637" method="post" id="getUserInput">
<label for="testFramework">Test Framework</label><br>
<input type="radio" id="testFramework" name="test_framework" value="MSTest">
<label for="testFramework">MSTest</label><br>
<input type="radio" id="testFramework" name="test_framework" value="XUnit">
<label for="testFramework">XUnit</label><br>
<label for="projectName">Project Name:</label><br>
<input type="text" id="projectName" name="projectName"><br>
<label for="namespace">Namespace:</label><br>
<input type="text" id="namespace" name="namespace"><br>
<label for="testClassName">Test Class Name:</label><br>
<input type="text" id="testClassName" name="testClassName"><br>
<label for="testMethodName">Test Method Name:</label><br>
<input type="text" id="testMethodName" name="testMethodName"><br>
<input type="hidden" name="MAX_FILE_SIZE" value="100000" /><br>
Choose file to upload: <input name="uploadedfile" type="file" /><br>
<input type="submit" value="Generate Unit Tests" />
</form>
</div>
</body>
</html>`;
panel.webview.html = htmlFormContent;
}
// This method is called when your extension is deactivated
function deactivate() {}
module.exports = {
activate,
deactivate
}
This thing is working correctly in fiddler but not in extension.
I have WebView Options I have set enableScripts and enableForms to true. Is there anything else which needs to be set or there is problem with some other part of the code.
vscode.ViewColumn.One, // Editor column to show the new webview panel in.
{
enableForms:true,
enableScripts: true
} // Webview options. More on these later.
Any pointers would be helpful.

Framer Motion ReOrder behaviour not reordering as expected

I am currently trying to implemented a draggable re-orderable list with Framer Motion. I am trying to reproduce the following behaviour:
https://codesandbox.io/s/framer-motion-5-drag-to-reorder-lists-uonye?from-embed=&file=/src/Icon.tsx:49-54
I have an ingredientList that contains the create_index of the each of the ingredients created in my Formik form, which are accessible as values.ingredients.
The main issue I am having is that the list items are not behaving smoothly as they do in the code example and I'm not sure what I am doing wrong
This is my parent component in which I set the ingredientList
const IngredientTab = ({values}: any) => {
const [ingredientList, setIngredientList] = useState(values.ingredients.map((ingredient) => ingredient.create_index))
return (
<div css={IngredientTabStyles}>
<FieldArray name="ingredients">
{({ insert, remove, push }) => (
<div>
<Reorder.Group axis="y" values={ingredientList} onReorder={setIngredientList}>
<AnimatePresence>
{ingredientList.map((ingredientUniqueValue, index) => {
return (
<Ingredient
key={index}
index={index}
uniqueValue={ingredientUniqueValue}
ingredients={values.ingredients}
order={`${ingredientList.indexOf(ingredientUniqueValue) + 1}`}
/>
)
})}
</AnimatePresence>
</Reorder.Group>
<button
type="button"
className="add-ingredients"
onClick={() => {
setIngredientList([...ingredientList, values.ingredients.length])
push({ name: '', additional_info: '', quantity: '', unit_id: '', create_index: values.ingredients.length})
}}
>
Add Ingredient
</button>
</div>
)}
</FieldArray>
</div>
)
}
export default IngredientTab
const IngredientTabStyles = css`
.ingredient-fields {
margin-bottom: 2rem;
background-color: white;
}
`
And this is the Item component:
const Ingredient = ({ uniqueValue, ingredients, order, ingredient}: any) => {
const y = useMotionValue(0);
const boxShadow = useRaisedShadow(y);
const ingredientIndex = ingredients.findIndex(ingredient => ingredient.create_index==uniqueValue)
return (
<Reorder.Item
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
key={uniqueValue}
value={uniqueValue}
style={{boxShadow,y}}
>
{ingredient}
<div className="ingredient-fields" css={IngredientStyles}>
<div className="order">
<h6>{order}</h6>
</div>
<div className="ingredient-name">
<Field
name={`ingredients.${ingredientIndex}.name`}
type='text'
placeholder="Ingredient"
/>
<Field
name={`ingredients.${ingredientIndex}.additional_info`}
type='text'
placeholder="Description"
/>
</div>
<Field
name={`ingredients.${ingredientIndex}.quantity`}
type='number'
placeholder="Quantity"
/>
</div>
</Reorder.Item>
)
}
export default Ingredient
const IngredientStyles = css`
display: flex;
margin-bottom: 2rem;
.order {
display: flex;
align-items: center;
background-color: ${theme.components.grey};
padding: 1rem 2rem;
margin-right: 2rem;
border-radius: 0.4rem;
}
.ingredient-name {
display: flex;
}
input {
padding-bottom: 1rem;
border: none;
border-bottom: 1px solid ${theme.colors.lightGrey};
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
}
`
I tried to take screenshots of the behaviour that I currently have. If I try to drag the 'bonjour' to the first position, the 1st item 'hello' does not move downwards. Instead what happens onReorder, what you see in the second picture, the bonjour and hello abruptly switch and it looks as though I am dragging the 'hello' item

Vue.js 2: Modal Dialog - close when Method is successful

I have the following directive:
import Vue from 'vue'
const Dialog = Vue.extend({
template: `
<div v-if="show" class="modal">
<div class="modal-body">
<div class="modal-header"><h3>Aktion bestätigen</h3></div>
<div class="modal-content">
<div class="uk-flex">
<div class="uk-margin-small-right">
<span uk-icon="icon: question; ratio: 3"></span>
</div>
<div>
Are You sure?
</div>
</div>
<hr>
<div class="uk-flex uk-flex-right">
<button class="uk-button uk-button-danger uk-margin-small-right" #click="confirmed">Yes</button>
<button class="uk-button uk-button-default" #click="show = false">Cancel</button>
</div>
</div>
</div>
</div>
`
});
Vue.directive('confirm', {
bind(el, binding, vnode) {
let confirm_method = binding.value;
el.handleClick = (e) => {
const data = { confirmed: confirm_method , show: true};
let dialog = new Dialog({data: data}).$mount();
document.getElementsByTagName('body')[0].appendChild(dialog.$el);
}
el.addEventListener('click', el.handleClick);
},
unbind(el) {
el.removeEventListener('click', el.handleClick);
}
});
This works fine. When I click on "Cancel", the modal closes. When I click "Yes", the method defined in Vue template
<button v-confirm="delete">delete</button>
is executed.
But the modal does not appear. How to tell the modal to close after the method has been executed, and maybe show an error message, when there was an error?
You can pass methods to Dialog:
Vue.directive('confirm', {
bind(el, binding, vnode) {
let confirm_method = binding.value;
el.handleClick = (e) => {
const data = { confirmed: confirm_method , show: true};
let dialog = new Dialog({
data: data,
methods: {
confirmedInternal() {
this.show = false
this.confirmed()
}
}
}).$mount();
document.getElementsByTagName('body')[0].appendChild(dialog.$el);
}
el.addEventListener('click', el.handleClick);
},
unbind(el) {
el.removeEventListener('click', el.handleClick);
}
});
then calling confirmedInternal when yes button is click
<button class="uk-button uk-button-danger uk-margin-small-right" #click="confirmedInternal">Yes</button>
Demo: https://jsfiddle.net/guqc2src/
Vue documentation has pretty good example of modal.
The key option is $emit('close'). You can call $emit('close') on your method success.
// register modal component
Vue.component('modal', {
template: '#modal-template'
})
// start app
new Vue({
el: '#app',
data: {
showModal: false
}
})
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
transition: opacity .3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
width: 300px;
margin: 0px auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
transition: all .3s ease;
font-family: Helvetica, Arial, sans-serif;
}
.modal-header h3 {
margin-top: 0;
color: #42b983;
}
.modal-body {
margin: 20px 0;
}
.modal-default-button {
float: right;
}
/*
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/
.modal-enter {
opacity: 0;
}
.modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<!-- template for the modal component -->
<script type="text/x-template" id="modal-template">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" #click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<!-- app -->
<div id="app">
<button id="show-modal" #click="showModal = true">Show Modal</button>
<!-- use the modal component, pass in the prop -->
<modal v-if="showModal" #close="showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<h3 slot="header">custom header</h3>
</modal>
</div>

How can redirect html page in mobile version only without refresh redirect page

How to redirect html page url in mobile version only without refresh page
$(document).ready(function() {
if (screen.width <= 800) {
document.location ="page.html";
}
});
/* [Object] Modal
* =============================== */
.modal {
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: left;
background: rgba(0,0,0, .9);
transition: opacity .25s ease;
}
.modal__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer;
}
.modal-state {
display: none;
}
.modal-state:checked + .modal {
opacity: 1;
visibility: visible;
}
.modal-state:checked + .modal .modal__inner {
top: 0;
}
.modal__inner {
transition: top .25s ease;
position: absolute;
top: -20%;
right: 0;
bottom: 0;
left: 0;
width: 50%;
margin: auto;
overflow: auto;
background:#fff;
border-radius: 5px;
padding: 5em 2em;
height: 10%;
}
.modal__close {
position: absolute;
right: 1em;
top: 1em;
width: 1.1em;
height: 1.1em;
cursor: pointer;
}
.modal__close:after,
.modal__close:before {
content: '';
position: absolute;
width: 2px;
height: 1.5em;
background: #ccc;
display: block;
transform: rotate(45deg);
left: 50%;
margin: -3px 0 0 -1px;
top: 0;
}
.modal__close:hover:after,
.modal__close:hover:before {
background: #aaa;
}
.modal__close:before {
transform: rotate(-45deg);
}
#media screen and (max-width: 768px) {
.modal__inner {
width: 90%;
height: 90%;
box-sizing: border-box;
}
}
/* Other
* =============================== */
.btn {
cursor: pointer;
/* background: #27ae60; */
display: inline-block;
padding: 0em 1em;
color: #333;
border-radius: 3px;
font-size:13px;
}
#module-circle{font-size:8px !important}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body class="landing">
<!-- Main -->
<section style="width:100%" class="table-content" id="Diverse-content">
<div class="table-content" id="table1-content">
<header class="major" id="Diverse-head">
</header>
<!-- Image -->
<section class="Diverse-content">
<div class="row">
<section class="4u 6u(medium) 12u$(small) cusfont">
<h1 style="visibility:hidden">Example</h1>
<div>
<p>
<label class="btn" for="modal-1"><i class="fa fa-circle" id="module-circle"></i> Example1</label>
</p>
</div>
<input class="modal-state" id="modal-1" type="checkbox" />
<div class="modal">
<label class="modal__bg" for="modal-1"></label>
<div class="modal__inner">
<label class="modal__close" for="modal-1"></label>
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dui commodo, imperdiet mauris ac, molestie massa. Vivamus id leo eu ligula interdum dictum a in massa</p>
</div>
</div>
</section>
<section class="4u 6u$(medium) 12u$(small) cusfont" >
<!-- <div class="drivers-table2">
<div class="head-section1">
<h4><i class="fa fa-users"></i>Heading </h4>
</div>
<p class="batch">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dui commodo, imperdiet mauris ac, molestie massa. Vivamus id leo eu ligula interdum dictum a in massa</p>
</div> -->
<div>
<p>
<label class="btn" for="modal-2"><i class="fa fa-circle" id="module-circle"></i> Example2</label>
</p>
</div>
<input class="modal-state" id="modal-2" type="checkbox" />
<div class="modal">
<label class="modal__bg" for="modal-2"></label>
<div class="modal__inner">
<label class="modal__close" for="modal-2"></label>
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dui commodo, imperdiet mauris ac, molestie massa. Vivamus id leo eu ligula interdum dictum a in massa</p>
</div>
</div>
</section>
</div>
</section>
</div>
</section>
</div>
</section>
</div>
</section>
</td>
<td style="width: 10%;"></td>
</tr>
</table>
How can this page layout will be show mobile version only without refresh page using javascript.
mobile version only will show this page without refresh
You can use one of these coding languages (JS, .htaccess, PHP):
JS:
if (screen.width <= 699) {
document.location = "mobile.html";
}
Source: https://css-tricks.com/snippets/javascript/redirect-mobile-devices/ <= This might be the one your looking for.
.htaccess:
RewriteEngine On
# Check if this is the noredirect query string
RewriteCond %{QUERY_STRING} (^|&)noredirect=true(&|$)
# Set a cookie, and skip the next rule
RewriteRule ^ - [CO=mredir:0:%{HTTP_HOST},S]
# Check if this looks like a mobile device
# (You could add another [OR] to the second one and add in what you
# had to check, but I believe most mobile devices should send at
# least one of these headers)
RewriteCond %{HTTP:x-wap-profile} !^$ [OR]
RewriteCond %{HTTP:Profile} !^$
# Check if we're not already on the mobile site
RewriteCond %{HTTP_HOST} !^m\.
# Check to make sure we haven't set the cookie before
RewriteCond %{HTTP:Cookie} !\smredir=0(;|$)
# Now redirect to the mobile site
RewriteRule ^ http://m.example.org%{REQUEST_URI} [R,L]
Source: Mobile Redirect using htaccess <= This is a little complex but, it works
PHP:
<? if (
stristr($ua, "Windows CE") or
stristr($ua, "Mobile") ) {
$DEVICE_TYPE="MOBILE";
}
if (isset($DEVICE_TYPE) and $DEVICE_TYPE=="MOBILE") {
$location='YOUR-MOBILE-SITE.com/index.php';
header ('Location: '.$location);
exit;
}
?>
http://www.designyourway.net/blog/resources/detecting-and-redirecting-mobile-users/ <= Just an extra.
Good Luck!

Add span inside form's placeholder

I wanna add a color asterix in my form's placeholder, is it possible?
Here is pure css solution IE10+
.input-placeholder {
position: relative;
}
.input-placeholder input {
padding: 10px;
font-size: 25px;
}
.input-placeholder input:valid + .placeholder {
display: none;
}
.placeholder {
position: absolute;
pointer-events: none;
top: 0;
bottom: 0;
height: 25px;
font-size: 25px;
left: 10px;
margin: auto;
color: #ccc;
}
.placeholder span {
color: red;
}
<form novalidate>
<div class="input-placeholder">
<input type="text" required>
<div class="placeholder">
Email <span>*</span>
</div>
</div>
<input type="submit">
</form>
At first glance it doesn't seem possible, but it may be a good alternative to create your own fake spanholder element:
<div class="holder">Email Address <span class="red">*</span></div>
<input id="input" size="18" type="text" />
Fiddle
As far as I know, this is not possible.
One solution I have seen used in the past is to add a background-image of a red asterisk to your input field, but that makes it difficult to duplicate the visual alignment you are going for. More info on this method: Use CSS to automatically add 'required field' asterisk to form inputs
Another solution would be to add the span (and placeholder text) outside of the input field, but that would require some JavaScript to control when it is and isn't visible.
Here is a JSFiddle I just created for this method (using jQuery): http://jsfiddle.net/nLZr9/
HTML
<form>
<div class="field">
<label class="placeholder" for="email">
Email Address
<span class="red">*</span>
</label>
<input id="email" type="text" />
</div>
</form>
CSS
.field {
position: relative;
height: 30px;
width: 200px;
}
input, label {
position: absolute;
top: 0;
left: 0;
bottom: 0;
top: 0;
background: transparent;
border: 0;
padding: 0;
margin: 0;
text-indent: 5px;
line-height: 30px;
}
JS
$('.field input')
.on( 'focus', function () {
$(this).siblings('label').hide();
} )
.on( 'blur', function () {
if ( !$(this).val() )
$(this).siblings('label').show();
} );
You can try the following :
HTML
<div class="hold">
<input type="text" placeholder="" required="required">
<span class="req_placeholder">Name <span>*</span></span>
</div>
CSS
.hold {
position: relative;
}
input[required="required"]:valid + .req_placeholder {
display: none;
}
.req_placeholder {
position: absolute;
top: 2px;
left: 2px;
}
.req_placeholder span {
color: red;
}
I found a jQuery plugin that might suit you, the pholder plugin.
If you look the demo, the placholder of the "Name" field is red.
There may be other plugins or maybe you can edit it. :)
This is a good case for pseudo-elements.
.someclass {
position:relative;
}
.someclass:after {
position:absolute;
top:0;
right:10px;
content: "*";
color:#ff0000
}
...adjust to your own layout.
You can use pseudo elements in CSS (not supported in old browsers)
.mandatory::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #ff0000;
}
.mandatory:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #ff0000;
}
.mandatory::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #ff0000;
}
.mandatory:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #ff0000;
}
.mandatory:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
color: #ff0000;
}
<form>
<p>
<label for="input1">Input 1:</label>
<input type="text" id="input1" placeholder="Fill input" class="mandatory" />
</p>
<p>
<label for="input2">Input 2:</label>
<input type="text" id="input2" placeholder="Fill input" />
</p>
<p>
<label for="textarea">Input 2:</label>
<textarea id="textarea" placeholder="Fill textarea"></textarea>
</p>
</form>