In my form, I want to indicate required fields with a red star (*). Is there a way to display the star in red color?
Also, why does the border turn blue when I click on an input field? Here is the code and screenshot for reference: https://codesandbox.io/s/8yxw2nyp52
https://i.stack.imgur.com/7vcVy.png
I found guidance from the following resource: https://material-ui.com/demos/text-fields/
To enhance the aesthetics of your website, consider utilizing a span tag with specific styling for "*" symbol and adding color to it.
For improved clarity, please review the provided updated solution below:
import React from "react";
import { withStyles } from "@material-ui/core/styles";
import {
TextField,
FormControl,
InputLabel,
Select,
MenuItem,
Input,
Grid,
Button,
FormHelperText
} from "@material-ui/core";
const styles = {
formControl: {
width: "100%"
},
searchForm_submit_button: {
background: "#e40000",
borderRadius: 0,
color: "#FFF",
fontSize: 20,
fontWeight: 100,
"&:hover": {
background: "#a30000",
borderColor: "#a30000"
}
}
};
const SearchForm = props => {
const {
form: { searchValue, circle, searchCriteria },
handleInput,
classes
} = props;
const style={color: 'red'};
return (
<div>
<Grid item sm={6}>
<form className="" noValidate autoComplete="off">
<FormControl className={classes.formControl}>
<InputLabel htmlFor="circle">Circle <span style={style}>*</span></InputLabel>
<Select
value={circle}
onChange={event => handleInput(event, "circle")}
input={<Input name="circle" id="circle" />}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
<FormHelperText>Some important helper text</FormHelperText>
</FormControl>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="searchCriteria">SEARCH CRITERIA <span style={style}>*</span></InputLabel>
<Select
value={searchCriteria}
onChange={event => handleInput(event, "searchCriteria")}
input={<Input name="searchCriteria" id="searchCriteria" />}
>
<MenuItem selected disabled value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
<FormHelperText>Some important helper text</FormHelperText>
</FormControl>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="searchValue">SEARCH VALUE <span style={style}>*</span></InputLabel>
<TextField
id="name"
className=""
value={searchValue}
onChange={event => handleInput(event, "searchValue")}
helperText="Some important text"
margin="normal"
/>
</FormControl>
<Button
variant="contained"
className={classes.searchForm_submit_button}
>
Submit
</Button>
</form>
</Grid>
</div>
);
};
export default withStyles(styles)(SearchForm);
https://i.stack.imgur.com/PAfJM.png
The default color shown by Material-UI upon field selection can be customized using mui-theme style to personalize material-ui components as per your preference.
My bootstrap panel's margins are set to 0, but it doesn't seem to actually be 0. In the image attached, the margin shows as "-", which I assume means 0. However, when I highlight it, I see a large block of orange. Does this indicate that the marg ...
I'm currently developing a web application using the MEAN stack, and I've encountered an issue with my mongoose instance that's giving me a headache. Let me share parts of my code: my route const express = require('express'); co ...
I have a dataset that consists of different arrays of objects. When I log myData, the output looks something like this: [ { name: 'Cdb', image: 'xxx', coll: 'xxx' }, { name: 'Bcd', image: &a ...
I'm a bit puzzled by the current situation where: let groupdetails = { groupName: "", }; const groupsArray = []; groupdetails.groupName = 'A' groupsArray.push(groupdetails) groupdetails.groupName = 'B' groupsAr ...
Here is the code style I am currently using in my JavaScript project: var obj = { a: 1 , b: 2 , c: 3 } var arr = [ 'a1' , 'a2' , 'a3' ] const w = 1 , w2 = 2 , w3 = 3 The team claims they are following npm's co ...
How can you navigate to a different Route in React by clicking on an element and sending some data to the new Route? onDaySelect = (e, day) => { this.setState({ selectedDay: day }, () => { console.log("SELECTED DAY: ", this.sta ...
Here is the link to my JS Fiddle: http://jsfiddle.net/m4tyC/ I am working with multiple select tags and need to validate them upon submission. For example, at least one of size1, color1, or Qty1 must be selected in the first group. If one item is selected ...
I have successfully created a CRUD page where users can input text and it gets added to a list. Now, I am trying to save that list in localStorage but encountering an issue where the console log is showing an empty object. Any assistance on this matter wou ...
Hello there! I've run into an issue and could use some assistance, thank you in advance! Running MONGOOSE VERSION: "mongoose": "^7.0.3" Error Message: MongooseError: Model.findById() no longer accepts a callback at Function.findB ...
Currently, I am in the process of developing an application using reactjs and material-ui. This particular project involves creating a dashboard. In the past, I utilized react-mdl for components and found it to work well, especially with the navbar compone ...
Issue Description I am working on an app and struggling with styling the bottom navigation bar. It's more complex than what I've done before, especially the curved top edge of the white section and the area between the blue/green circle and the ...
I am trying to implement multiple fullscreen modals on a single page, but I am facing an issue where they slide in and out at an angle instead of just fading in and out. I have been unable to achieve the desired effect of a simple fade transition. If you ...
I am looking to switch tabs programmatically using bootstrap 5. The Bootstrap documentation recommends using buttons for tabs instead of links for a dynamic change. Here is the code I have: $("#mybut").click(function() { var sel = document.querySelector( ...
I have implemented a background image on the <input type="submit"> element to give it the appearance of a button. My CSS code looks like this: input.button { background-image:url(/path/to/image.png); } Furthermore, I would like to display a dif ...
Currently, I am facing an issue with positioning a docx file in my app. Interestingly, jpg and mp4 files are displaying correctly, but the docx file is not positioned as expected. If you want to try it out, simply open a doxc file. In the FileContentRend ...
When I hover over a photo, an overlay is supposed to appear. However, if I move the mouse quickly (from the top to the bottom of the page, for example), the overlay remains visible even after I stop hovering over the photo. I have tried different event ha ...
I am looking to implement a dropdown sorting functionality for multiple divs based on different data attributes such as price and popularity. The specific divs are labeled as "element-1" and are contained within the "board-container". var divList = $(". ...
I need to trigger my function loadTest() once the bootstrap dialog is fully loaded and displayed. $(".btn").on("click", function() { $.ajax({ type: "POST", url: '/echo/html/', data: { html: '', ...
I am currently working with React-Testing-Library and have set up my main.tsx file with Redux-Toolkit and React-Router wrappers like this: ReactDOM.createRoot(document.getElementById("root")!).render( <React.StrictMode> <Provider s ...
Seeking assistance from the experts on my first question here at stackoverflow. Our web application allows users to input escape/special characters, and we are conducting testing for extreme scenarios. I have successfully passed escape characters through a ...