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.
Is it possible to achieve two conflicting goals using CSS Grid? In my design, I want the content in each cell to be vertically centered using align-items: center; At the same time, I need the entire area of the cell to be filled with color. However, ...
I encountered an issue while trying to populate a selected dropdown using ngRepeat inside a custom directive. I came across this example that seemed similar to what I wanted to achieve here. Although it worked for the example, it didn't work for me. ...
I am working on a project where I need to repeat a card multiple times using ngFor. Since the number of cards will vary each time the page loads, I want to use virtual scrolling to handle any potential overflow. However, I have been struggling to get it ...
I am facing an issue with text wrapping within a flexbox. I want the width of the flex item to always match the length of the wrapped text so that an icon placed next to the item stays adjacent to the text. However, due to text wrapping, there is a gap bet ...
Check out this interesting quiz: I noticed that in this quiz, when you answer a question, only that section refreshes instead of the entire page. How can I create a quiz like this? ...
After experimenting with AngularJS, I decided to create a dynamic route system that funnels all routes through a single PHP file. This was motivated by my desire to prevent users from accessing raw templateUrl files and seeing unstyled partial pages. Prio ...
I have a loop setup like this: data: { show: false } .test { hight: 10px; background-color: red; } .test2 { hight: 15px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div v-for="value in da ...
I'm facing an issue with the display of a website (found here). The elements inside the div with the class name of .index_container are not appearing correctly in Firefox. Despite being present, they remain invisible. I've attempted to resolve th ...
Even though I understand that Javascript is not the same as C# or PHP, I keep encountering an issue with Javascript - specifically with how I use it. Here's the scenario: function updateStatuses(){ showLoader() //displays 'loader.gif' on ...
I'm a beginner in Next.js and I've just started learning about pre-rendering. I'm a bit confused on how to update props data from getServerSideProps. _app.tsx import type { AppProps } from 'next/app'; function MyApp({ Component, ...
Struggling to make socket.io function properly on Heroku, encountering issues with code inconsistency between development and deployment. The problem persists even after uploading to Heroku: 1. No unusual activity in the logs. 2. Data saved to the databa ...
Imagine this scenario, where we are making an AJAX request and inserting the result inside a div with the id of "result". On the backend, the script is using ob_flush() to send the header but not terminating the request until it's explicitly terminat ...
The Color Generator tool on Material.io has helped me create a unique color theme which I generated using the following link: Color Theme Generator I tried to use the exported xml color file for Android in Android Studio but encountered issues with the SD ...
As I delve into the world of arrays in JavaScript, I encounter a puzzling scenario where one array consists of objects and another entails an array of objects. const products = [ { id: '111', analysis: [ { id: 1, ...
Just starting out with React, so I could really use some assistance from the community! I am working with a prop called 'sampleProp' which is defined as follows: sampleProp = {key:0, value:[]} When I click a button, I am trying to remo ...
For some time now, I've been facing this issue and I'm at a loss trying to figure it out. I have attempted various solutions such as using .click(), .on(), .delegate, and even utilizing .find() to locate the specific element causing the problem. ...
Attempting server-side rendering for the first time has led me to a roadblock - getting Node to execute my server file without encountering an error related to <App />: <div id="root">${ReactDOMServer.renderToString(<App />)}</div> ...
Currently working on an Angular app that uses @ngx-translate. In my implementation, I am using TranslateModule.forRoot(...) to set up a TranslateLoader: @NgModule({ imports: [ TranslateModule.forRoot({ loader: { provide: TranslateLoade ...
Check out this relevant Codesandbox There seems to be a recurring issue in my application where rounded divs display edges when they are of smaller sizes. Refer to the image below for a visual representation. What could be causing this problem and how can ...
Currently, I am working with Rails 6 and webpack in my project. I am interested in integrating the library jquery-textcomplete, but I am unsure about how to properly include it in the application.js file. Here are the steps I have taken so far: I instal ...